/* Oikolauta (demo): a building under wraps. Concrete and mesh greys, black printed-banner type in Archivo at
   narrow widths, one site colour only on the quote action. Structure (bay standards, ledgers, plates) is the only
   ornament. Colours are roles, so a palette swap is the :root block. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ground: #e6e6e1;
  --ground-2: #d8d9d3;
  --field: #f2f2ee;
  --ink: #121413;
  --ink-2: #4a4e4b;
  --line: rgba(18, 20, 19, .16);
  --banner: #121413;
  --on-banner: #eeeee9;
  --on-banner-2: #a9aca8;
  --act: #1f6b45;
  --act-hi: #175536;
  --on-act: #ffffff;
  --mesh: 244, 245, 241;
  --gut: clamp(16px, 2.8vw, 64px);
  --gap: clamp(12px, 1.6vw, 32px);
  --top: 3.6rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, calc(.45vw + 9.5px), 24px); scroll-behavior: smooth; scroll-padding-top: var(--top); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.5 "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
html { scrollbar-color: var(--ink-2) var(--ground-2); }

/* the banner voice: heavy, narrow, upper case */
.o-mark, .o-name, .o-h, .o-bay h3, .o-plate-h, .o-steps h3, .o-steps li::before, .o-foot-mark, .o-tag, .o-btn {
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

.o-btn {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: .7rem 1.25rem .65rem;
  border: 0;
  border-radius: 0;
  background: var(--act);
  color: var(--on-act);
  font-family: inherit;
  font-size: 1.25rem;
  font-stretch: 72%;
  line-height: 1;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.o-btn:hover { background: var(--act-hi); }
.o-btn:active { transform: translateY(1px); }
.o-btn-s { min-height: 2.4rem; padding: .5rem .9rem .45rem; font-size: 1.05rem; }

/* header: one strip, the name left, the way to call or ask right */
.o-top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 3rem);
  height: var(--top);
  padding: 0 var(--gut);
  background: var(--ground);
  border-bottom: 2px solid var(--ink);
}
.o-mark { font-size: 1.9rem; line-height: 1; text-decoration: none; }
.o-nav { display: flex; gap: clamp(1rem, 2vw, 2.4rem); margin-right: auto; }
.o-nav a, .o-top-phone { font-weight: 600; font-stretch: 87%; text-decoration: none; }
.o-nav a:hover, .o-top-phone:hover { text-decoration: underline; }
.o-top-phone { font-variant-numeric: tabular-nums; }
.o-top-call { display: none; }

/* the first screen: the house under mesh; --drop (0% to 100%) lets the mesh fall */
.o-wrap { position: relative; height: 100svh; }
.js .o-wrap { height: 240svh; }
.o-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ground-2); }
.o-house, .o-veil { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.o-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translate3d(0, var(--drop, 0%), 0);
  will-change: transform;
}
.o-veil { transform: translate3d(0, calc(var(--drop, 0%) * -1), 0); will-change: transform; }
/* the netting: a real photo of knitted debris netting (img/netting-tile.webp, made from a Pexels photo), keyed to
   white strands on clear, over a slightly lifted copy of the house */
.o-net {
  position: absolute;
  inset: 0;
  background: url("img/netting-tile.webp") 0 0 / 95px repeat, rgba(var(--mesh), .1);
}
/* where two widths of netting overlap: the same netting again, shifted, in a band at each join */
.o-net::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/netting-tile.webp") 31px 17px / 95px repeat;
  opacity: .7;
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 calc(24vw - 1.4rem), #000 calc(24vw - 1.4rem) 24vw);
  mask-image: repeating-linear-gradient(90deg, transparent 0 calc(24vw - 1.4rem), #000 calc(24vw - 1.4rem) 24vw);
}
.o-mesh::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 3rem 4rem -3rem rgba(0, 0, 0, .12); }

.o-banner {
  position: absolute;
  inset-inline: clamp(16px, 7vw, 10rem);
  top: calc(50% + var(--top) / 2);
  z-index: 2;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem 3rem;
  padding: clamp(1.4rem, 2.6vw, 3.4rem) clamp(1.6rem, 3.2vw, 4.2rem) clamp(1.6rem, 2.8vw, 3.6rem);
  background: var(--banner);
  color: var(--on-banner);
  box-shadow: 0 1.2rem 2.8rem -1.2rem rgba(0, 0, 0, .45);
}
.o-name {
  grid-column: 1 / -1;
  font-size: clamp(4.4rem, 18.6vw, 30rem);
  line-height: .78;
  margin-left: -.04em;
}
.o-what { max-width: 30ch; font-size: clamp(1.15rem, 1.7vw, 2rem); line-height: 1.3; font-weight: 500; text-wrap: balance; }
.o-acts { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: end; }
.o-acts .o-btn { font-size: clamp(1.25rem, 1.5vw, 1.8rem); min-height: 3.4rem; }
.o-phone { font-size: clamp(1.15rem, 1.4vw, 1.7rem); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.o-phone:hover { text-decoration: underline; }

.o-caption {
  position: absolute;
  left: var(--gut);
  bottom: var(--gut);
  padding: .55rem .8rem;
  background: var(--ground);
  font-size: 1rem;
  opacity: var(--cap, 0);
}
.o-caption b { font-stretch: 75%; font-weight: 800; text-transform: uppercase; margin-right: .5rem; }
html:not(.js) .o-caption { display: none; }

/* shared heading */
.o-h { font-size: clamp(2.8rem, 6.4vw, 8rem); line-height: .86; }

/* what they build: four scaffold bays, the standards and ledgers drawn as the frame */
.o-work { padding: clamp(4rem, 9vw, 10rem) var(--gut) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.o-work .o-h { grid-column: 1 / 8; }
.o-area { grid-column: 9 / 13; color: var(--ink-2); font-size: 1.05rem; max-width: 34ch; }
.o-bays {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 4.5rem);
  border: 4px solid var(--ink);
  border-right: 0;
}
.o-bay { display: grid; grid-template-rows: auto auto 1fr; border-right: 4px solid var(--ink); }
.o-bay img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-bottom: 2px solid var(--ink); }
.o-bay h3 { padding: 1.1rem 1.1rem .35rem; font-size: clamp(2rem, 3.1vw, 3.8rem); line-height: .9; }
.o-bay p { padding: 0 1.1rem 1.5rem; color: var(--ink-2); max-width: 34ch; }

/* sites: each a photo and its plate; the unfinished one is still under mesh */
.o-sites { padding: clamp(5rem, 10vw, 12rem) var(--gut) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(3.5rem, 8vw, 9rem); }
.o-sites > .o-h { grid-column: 1 / -1; }
.o-site { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
.o-site-photo { position: relative; overflow: hidden; }
.o-site-photo img { width: 100%; height: 100%; object-fit: cover; }
.o-site-1 .o-site-photo { grid-column: 1 / 6; aspect-ratio: 1 / 1; }
.o-site-1 .o-site-photo img { object-position: 50% 0%; }
.o-site-1 .o-plate { grid-column: 7 / 12; }
.o-site-2 .o-site-photo { grid-column: 5 / 13; grid-row: 1; aspect-ratio: 4 / 3; }
.o-site-2 .o-plate { grid-column: 1 / 5; grid-row: 1; }
.o-site-3 .o-site-photo { grid-column: 2 / 7; aspect-ratio: 4 / 5; }
.o-site-3 .o-plate { grid-column: 8 / 13; }
.o-site-photo .o-net::after { -webkit-mask-image: none; mask-image: none; opacity: 0; }
.o-tag { position: absolute; left: 1rem; top: 1rem; padding: .35rem .6rem .3rem; background: var(--banner); color: var(--on-banner); font-size: 1.2rem; line-height: 1; }
.o-plate {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  border-top: 4px solid var(--ink);
  font-variant-numeric: tabular-nums;
}
.o-plate dt, .o-plate dd { padding: .7rem 0 .75rem; border-bottom: 1px solid var(--line); }
.o-plate dt { color: var(--ink-2); font-size: .9rem; font-weight: 600; font-stretch: 87%; padding-top: .85rem; }
.o-plate .o-plate-h, .o-plate dt.o-plate-h { grid-column: 1 / -1; font-weight: 900; font-stretch: 62%; border-bottom: 0; padding: .9rem 0 0; color: var(--ink); font-size: clamp(2rem, 3vw, 3.6rem); line-height: .9; }
.o-plate dd.o-plate-h { padding: .3rem 0 1rem; font-stretch: 87%; font-weight: 500; text-transform: none; font-size: clamp(1.2rem, 1.5vw, 1.8rem); border-bottom: 2px solid var(--ink); }

/* how a job goes: one wide photo, then five steps along a line, in order */
.o-how { padding: clamp(5rem, 10vw, 12rem) 0 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.o-how-photo { grid-column: 1 / -1; height: clamp(14rem, 34vw, 40rem); overflow: hidden; }
.o-how-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.o-how .o-h { grid-column: 1 / -1; padding: clamp(2rem, 4vw, 4.5rem) var(--gut) 0; }
.o-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(2rem, 3.5vw, 4rem) var(--gut) 0;
  border-top: 4px solid var(--ink);
  counter-reset: step;
}
.o-steps li { counter-increment: step; padding: 1.2rem 1.6rem 0 0; position: relative; }
.o-steps li + li { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.o-steps li::before { content: counter(step); display: block; font-size: clamp(3rem, 5vw, 6rem); line-height: .8; color: var(--ink); margin-bottom: 1rem; }
.o-steps h3 { font-size: clamp(1.6rem, 2.2vw, 2.6rem); line-height: .9; margin-bottom: .5rem; }
.o-steps p { color: var(--ink-2); max-width: 30ch; }

/* the quote request */
.o-ask { padding: clamp(5rem, 10vw, 12rem) var(--gut) clamp(5rem, 9vw, 10rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.o-ask-side { grid-column: 1 / 5; position: sticky; top: calc(var(--top) + 2rem); }
.o-ask-lead { margin-top: 1.4rem; font-size: clamp(1.1rem, 1.3vw, 1.5rem); line-height: 1.35; max-width: 26ch; }
.o-who { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--ink); line-height: 1.6; font-variant-numeric: tabular-nums; }
.o-who b { font-weight: 700; margin-right: .3rem; }
.o-proof { margin-top: 2rem; color: var(--ink-2); font-size: .95rem; }
.o-proof li { padding: .45rem 0; border-top: 1px solid var(--line); }

.o-form { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem var(--gap); border-top: 4px solid var(--ink); padding-top: 1.6rem; }
.o-q { display: grid; gap: .5rem; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
.o-q-wide { grid-column: 1 / -1; }
.o-q > span, .o-q > legend { padding: 0; font-weight: 700; font-stretch: 87%; font-size: 1rem; }
.o-q > legend { margin-bottom: .5rem; }
.o-q input:not([type="radio"]):not([type="file"]), .o-q select, .o-q textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .8rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  caret-color: var(--act);
}
.o-q textarea { resize: vertical; min-height: 7rem; }
.o-q select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%); background-position: calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%; background-size: .36rem .36rem; background-repeat: no-repeat; padding-right: 2.4rem; }
.o-q input:focus-visible, .o-q select:focus-visible, .o-q textarea:focus-visible { outline: 3px solid var(--act); outline-offset: 0; }
.o-q [aria-invalid="true"] { border-color: #a3271b; }
.o-picks { display: flex; flex-wrap: wrap; gap: .5rem; }
.o-pick { position: relative; }
.o-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.o-pick span { display: block; padding: .6rem .9rem .55rem; border: 2px solid var(--ink); background: var(--field); font-weight: 600; font-stretch: 87%; transition: background-color .15s var(--ease), color .15s var(--ease); }
.o-pick:hover span { background: var(--ground-2); }
.o-pick input:checked + span { background: var(--ink); color: var(--ground); }
.o-pick input:focus-visible + span { outline: 3px solid var(--act); outline-offset: 2px; }
.o-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.o-file em { display: block; padding: .8rem .9rem; border: 2px dashed var(--ink-2); background: var(--field); font-style: normal; color: var(--ink-2); cursor: pointer; }
.o-file:hover em { border-color: var(--ink); color: var(--ink); }
.o-file input:focus-visible + em { outline: 3px solid var(--act); outline-offset: 2px; }
.o-send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: .4rem; }
.o-send .o-btn { font-size: 1.5rem; min-height: 3.6rem; padding-inline: 1.6rem; }
.o-note { max-width: 40ch; font-weight: 600; }
.o-note:empty { display: none; }

/* footer: the banner's own black */
.o-foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 1.6rem;
  padding: clamp(3rem, 5vw, 5rem) var(--gut) clamp(2rem, 3vw, 3rem);
  background: var(--banner);
  color: var(--on-banner);
}
.o-foot-mark { grid-column: 1 / 6; font-size: clamp(3rem, 6vw, 7rem); line-height: .8; }
.o-foot-lines { grid-column: span 3; line-height: 1.6; font-variant-numeric: tabular-nums; }
.o-foot-lines:last-of-type { grid-column: 10 / 13; }
.o-credit strong { color: var(--on-banner); }
.o-credit-end { margin-top: 0; padding-top: 0; border: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; }
.o-credit-end a { color: var(--on-banner); }
.o-lang { display: flex; gap: .8rem; }
.o-lang a[aria-current="page"] { text-decoration: none; opacity: .6; }
.o-credit { grid-column: 1 / -1; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(238, 238, 233, .2); color: var(--on-banner-2); font-size: .85rem; max-width: 80ch; }

@media (max-width: 1100px) {
  .o-bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-bay:nth-child(n + 3) { border-top: 4px solid var(--ink); }
  .o-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .o-steps li:nth-child(4) { padding-left: 0; border-left: 0; }
  .o-banner { grid-template-columns: 1fr; }
  .o-acts { justify-content: start; }
}

@media (max-width: 760px) {
  :root { --top: 3.2rem; }
  .o-nav, .o-top-num { display: none; }
  .o-top-call { display: inline; }
  .o-mark { margin-right: auto; font-size: 1.7rem; }
  .o-house, .o-veil { object-position: 44% 62%; }
  .o-banner { inset-inline: 12px; padding: 1.3rem 1.2rem 1.4rem; gap: .9rem; }
  .o-name { font-size: 18.6vw; }
  .o-acts { gap: .9rem; }
  .o-acts .o-btn { flex: 1 1 100%; justify-content: center; }
  .o-work .o-h, .o-area { grid-column: 1 / -1; }
  .o-area { margin-top: 1rem; }
  .o-bays { grid-template-columns: 1fr; }
  .o-bays { border-inline: 0; }
  .o-bay { border-right: 0; }
  .o-bay + .o-bay { border-top: 4px solid var(--ink); }
  .o-bays { margin-inline: calc(var(--gut) * -1); }
  .o-bay img { aspect-ratio: 16 / 10; }
  .o-bay h3, .o-bay p { padding-inline: var(--gut); }
  .o-site .o-site-photo, .o-site .o-plate { grid-column: 1 / -1; grid-row: auto; }
  .o-site .o-site-photo { margin-inline: calc(var(--gut) * -1); aspect-ratio: 4 / 3; }
  .o-site .o-plate { margin-top: 1rem; }
  .o-steps { grid-template-columns: 1fr; }
  .o-steps li, .o-steps li + li { padding: 1.2rem 0 1rem; border-left: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3.4rem 1fr; column-gap: .8rem; }
  .o-steps li::before { grid-row: span 2; font-size: 3rem; margin: 0; }
  .o-ask-side, .o-form { grid-column: 1 / -1; position: static; }
  .o-form { margin-top: 2.5rem; grid-template-columns: 1fr; }
  .o-foot-mark, .o-foot-lines, .o-foot-lines:last-of-type { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .o-wrap { height: 100svh; }
  .o-caption { display: none; }
  .o-btn, .o-pick span { transition: none; }
}