/* Lattice Atelier: the template's stylesheet, copied from index.html of the Lattice Atelier HTML release. */
  /* Lattice Atelier — a Formgong site template for a maker of windows and doors, built on Lattice.
     A split hero changes project as you scroll: the photo wipes up and every label rolls letter by letter.
     Every border sits on a grid line: --u is the cell, --gut the left offset, --cols/--rows the grid.
     The script recomputes them for the window, so change the cell size in the script, not here. */
  :root {
    --paper: #ffffff;
    --ink: #262626;
    --slate: #2f4c68;
    --line: #d5d5d5;
    --line-ink: #474747;
    --grid: rgba(38, 38, 38, .045);
    --grid-ink: rgba(255, 255, 255, .05);
    --muted: #6e6e6e;
    --faint: #b0b0b0;
    --error: #b3412f;
    --u: 75px;
    --gut: 45px;
    --cols: 12;
    --rows: 10;
    --split: 6;
    --ease: cubic-bezier(.19, 1, .22, 1);
    --font: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0; color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip;
    background-color: var(--paper);
    background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: var(--u) var(--u);
    background-position: var(--gut) 0;
  }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  p, h1, h2, ul, figure { margin: 0; }
  ul { padding: 0; list-style: none; }
  :focus-visible { outline: 1px solid currentColor; outline-offset: -6px; }
  .skip { position: absolute; left: -999px; top: 12px; z-index: 60; background: var(--ink); color: var(--paper); padding: 8px 12px; }
  .skip:focus { left: 16px; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .small { font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
  main { position: relative; z-index: 2; overflow-x: clip; }

  /* A bordered box. The -1px right and bottom margins make it one pixel larger than its cells,
     so its right and bottom borders land on the next grid line instead of one pixel short.
     Lines are painted by ::after over the transparent border, so they can be drawn in when the box appears. */
  @property --lc { syntax: "<color>"; inherits: true; initial-value: #d5d5d5; }
  .b { position: relative; border: 1px solid transparent; margin: 0 -1px -1px 0; min-width: 0; min-height: 0; --lc: var(--line); transition: --lc .3s; }
  .b::after {
    content: ""; position: absolute; inset: -1px; pointer-events: none;
    background:
      linear-gradient(var(--lc), var(--lc)) 0 0 / 100% 1px no-repeat,
      linear-gradient(var(--lc), var(--lc)) 0 0 / 1px 100% no-repeat,
      linear-gradient(var(--lc), var(--lc)) 100% 0 / 1px 100% no-repeat,
      linear-gradient(var(--lc), var(--lc)) 0 100% / 100% 1px no-repeat;
  }
  .ink { background: var(--ink); color: var(--paper); --lc: var(--ink); }
  .paper { background: var(--paper); }

  /* Letters. A label is split into letters; to change it, the old letters roll up and out
     while the new ones roll in from below, a few milliseconds apart. */
  .rw { display: grid; }
  .rw > .ly { grid-area: 1 / 1; }
  .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
  .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
  .ch { display: inline-block; white-space: pre; }
  /* Hover: each letter carries a copy of itself one line below (a text shadow) and rolls up to show it */
  .hv { display: inline-flex; overflow: hidden; line-height: 1.2; vertical-align: top; }
  .hv .ch { text-shadow: 0 1.2em currentColor; }

  /* Header */
  .bar { position: fixed; top: 0; left: 0; right: 0; z-index: 25; display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-template-rows: var(--u); padding-left: var(--gut); pointer-events: none; }
  .bar > * { display: flex; align-items: center; justify-content: center; pointer-events: auto; }
  .bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) + 1px); background: var(--paper); border-bottom: 1px solid var(--line); transform: translateY(-101%); transition: transform .6s var(--ease), background-color .3s, border-color .3s; }
  .bar-on .bar::before { transform: none; }
  .bar-dark .bar::before { background: var(--ink); border-color: var(--line-ink); }
  /* The name blends with what is under it: dark on paper, light on the dark footer and menu */
  .logo { position: fixed; z-index: 26; top: 0; left: calc(var(--gut) + var(--u)); height: var(--u); display: flex; align-items: center; padding-left: 22px; color: #fff; mix-blend-mode: difference; font-size: calc(var(--u) * .46); font-weight: 500; letter-spacing: -.03em; }

  .menu { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-template-rows: repeat(var(--rows), var(--u)); align-content: start; padding-left: var(--gut); background-color: var(--ink); background-image: linear-gradient(to right, var(--grid-ink) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px); background-size: var(--u) var(--u); background-position: var(--gut) 0; color: var(--paper); --line: var(--line-ink); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .9s var(--ease), visibility 0s .9s; }
  .menu.open { clip-path: inset(0); visibility: visible; transition: clip-path .9s var(--ease); }
  .mn-links a { display: flex; align-items: center; gap: 20px; height: var(--u); padding: 0 20px; border-bottom: 1px solid var(--line-ink); font-size: calc(var(--u) * .44); font-weight: 500; letter-spacing: -.02em; }
  .mn-links li:last-child a { border-bottom: 0; }
  .mn-links .small { width: 24px; color: rgba(255, 255, 255, .5); }
  .mn-box { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; font-size: 15px; }
  .mn-box .small { margin-bottom: 8px; color: rgba(255, 255, 255, .5); }

  /* Loader: slate screen, the words roll through, then the screen lifts away */
  .intro { position: fixed; inset: 0; z-index: 40; display: none; grid-template-columns: repeat(var(--cols), var(--u)); grid-template-rows: repeat(var(--rows), var(--u)); padding-left: var(--gut); background-color: var(--slate); background-image: linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: var(--u) var(--u); background-position: var(--gut) 0; color: var(--paper); cursor: pointer; clip-path: inset(0); transition: clip-path 1.1s var(--ease); }
  .js-intro .intro { display: grid; }
  .js-intro body { overflow: hidden; }
  .intro.out { clip-path: inset(0 0 100% 0); }
  .intro .small { align-self: center; padding: 0 22px; }
  .i-load { text-align: right; font-variant-numeric: tabular-nums; }
  .i-word { align-self: end; padding-left: 14px; font-size: calc(var(--u) * 2.3); font-weight: 500; line-height: 1; letter-spacing: -.045em; }

  /* Screens */
  .sec { position: relative; }
  .screen { position: relative; }
  .grid-on { display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-template-rows: repeat(var(--rows), var(--u)); align-content: start; padding-left: var(--gut); }
  /* Every section is a whole number of cells tall, so the page grid scrolls with the content and always lines up.
     Only the hero is pinned: its own grid is painted on its screen. */
  html.L .sec:not(.hero) .screen { height: calc(var(--rows) * var(--u)); overflow: hidden; }
  html.L .hero { height: calc(var(--rows) * var(--u) * 3); }
  .hero .screen { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  html.L :is(.facts, .c-list, .a-row, .k-info, .legal) { display: contents; }
  .disp { align-self: end; padding: 0 0 .14em 14px; font-size: min(calc(var(--u) * 1.4), calc(var(--cols) * var(--u) * .1)); font-weight: 500; line-height: .95; letter-spacing: -.045em; }

  /* Hero: paper on the left, the photo bleeds off the right edge from a grid line */
  .hero .screen { background-color: var(--paper); background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: var(--u) var(--u); background-position: var(--gut) 0; }
  .slides { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; left: calc(var(--gut) + var(--split) * var(--u)); overflow: hidden; background: var(--ink); }
  .slide { position: absolute; inset: 0; overflow: hidden; }
  .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .gridlay { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--gut) + var(--split) * var(--u)); z-index: 1; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: var(--u) var(--u); background-position: 0 0; }
  .hero .screen > :not(.slides):not(.gridlay) { z-index: 2; }
  .h-tab { display: flex; align-items: center; }
  .h-count { width: var(--u); flex: none; text-align: center; }
  .h-cat { white-space: nowrap; font-size: calc(var(--u) * .44); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
  .h-more { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .h-words { align-self: end; display: flex; flex-direction: column; padding-left: 22px; font-size: calc(var(--u) * .4); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; }
  .h-cap { display: grid; grid-template-columns: calc(var(--u) * 1.8) 1fr; align-content: start; padding: 16px 20px 0; font-size: calc(var(--u) * .4); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
  .h-cap h2 { font: inherit; }
  .h-disc { position: absolute; left: 20px; bottom: 16px; }
  .h-bar { position: absolute; left: -1px; bottom: -1px; width: calc(var(--u) * 2 + 1px); height: 3px; background: rgba(38, 38, 38, .12); }
  .h-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 0; transform: scaleX(var(--p, 0)); }
  .h-arrow { display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background-color .3s, color .3s; }
  .h-arrow:hover { background: var(--ink); color: var(--paper); }
  .h-arrow[disabled] { color: var(--faint); cursor: default; background: var(--paper); }
  html.F .h-words { display: none; }
  html.F .slides, html.F .gridlay { left: 0; top: var(--u); }
  html.F .gridlay { background-position: var(--gut) 0; }

  /* Manifesto */
  .m-label { display: flex; align-items: center; gap: 10px; padding: 0 20px; }
  .m-label b { font-weight: 500; color: var(--muted); }
  .m-text { padding: 10px 14px 0; font-size: calc(var(--u) * .54); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; }
  .m-img { overflow: hidden; }
  .m-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .fact { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 20px 16px; }
  .fact b { font-size: calc(var(--u) * .56); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
  .fact span { font-size: 14px; color: var(--muted); }

  /* Collections: whole rows are links; ink rises from the bottom on hover */
  .c-cta { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
  .c-row { overflow: hidden; transition: color .4s, --lc .3s; }
  .c-row::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ease); }
  .c-row:hover, .c-row:focus-within { color: var(--paper); --lc: var(--ink); }
  .c-row:hover::before, .c-row:focus-within::before { transform: none; }
  .c-a { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: var(--u) calc(var(--u) * 5) 1fr calc(var(--u) * 2); align-items: center; }
  .c-a:focus-visible { outline-offset: -8px; }
  .c-n { padding-left: 22px; }
  .c-name { padding-left: 14px; font-size: calc(var(--u) * .4); font-weight: 500; letter-spacing: -.02em; }
  .c-spec { padding-right: 20px; font-size: 14px; opacity: .72; }
  .c-go { display: flex; justify-content: flex-end; gap: 8px; padding-right: 20px; }

  /* Ateliers */
  .a-lab { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 20px; font-size: 14px; color: var(--muted); }
  .a-lab b { color: var(--ink); }
  .a-big { padding: 14px 20px; font-size: calc(var(--u) * .34); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
  .a-big a:hover { color: var(--muted); }

  /* Contact */
    .k-text { padding: 16px 14px 0; max-width: 34em; font-size: 17px; color: var(--muted); }
  .k-box { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px 20px; font-size: 15px; }
  .k-box .small { margin-bottom: auto; color: var(--muted); }
  .k-box a:hover { color: var(--muted); }
  .k-form { position: relative; display: grid; grid-template-columns: 1fr calc(var(--u) * 3); grid-auto-rows: var(--u); align-content: start; }
  .k-form > :is(.f, [data-turnstile], .sent) { grid-column: 1 / -1; }
  .f.msg { grid-row: span var(--msg, 2); }
  .f::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: calc(var(--u) * 2 - 1px); width: 1px; background: var(--lc); }
  .f:focus-within { z-index: 1; --lc: var(--ink); }
  .f label { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 2 - 1px); display: flex; align-items: center; padding: 0 20px; color: var(--muted); }
  .f.msg label { align-items: flex-start; padding-top: 27px; }
  .f input, .f textarea, .f select { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--u) * 2); width: auto; height: 100%; padding: 0 20px; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--ink); font: 500 calc(var(--u) * .3)/1.3 var(--font); letter-spacing: -.01em; resize: none; }
  .f textarea { padding-top: 18px; }
  .f select { appearance: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 0v11M1 7l4 4 4-4' fill='none' stroke='%23262626'/%3E%3C/svg%3E") no-repeat right 20px center / 10px 12px; }
  .f select:invalid { color: var(--faint); }
  .f ::placeholder { color: var(--faint); }
  .f:has(:user-invalid) { --lc: var(--error); }
  .f:has(:user-invalid) label { color: var(--error); }
  [data-turnstile] { display: flex; align-items: center; justify-content: center; }
  .consent { display: flex; align-items: center; gap: 14px; padding: 0 20px; font-size: 13px; line-height: 1.35; color: var(--muted); cursor: pointer; }
  .consent input { flex: none; appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); cursor: pointer; }
  .consent input:checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
  .consent:has(:user-invalid) { color: var(--error); }
  .consent:has(:user-invalid) input { border-color: var(--error); }
  .send { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; transition: background-color .3s; }
  .send:hover { background: #000; }
  .send[disabled] { opacity: .6; cursor: progress; }
  .status { position: absolute; left: 0; right: 40%; top: 100%; padding: 12px 20px 0; font-size: 13px; color: var(--muted); }
  .credit { position: absolute; right: 0; top: 100%; padding: 12px 20px 0; font-size: 13px; color: var(--muted); }
  .credit a { color: var(--ink); border-bottom: 1px solid currentColor; }
  .status.err { color: var(--error); }
  .sent { position: relative; display: none; grid-row: 1 / span var(--fr, 6); flex-direction: column; justify-content: center; gap: 18px; padding: 24px 24px calc(var(--u) + 24px); outline: none; background: var(--paper); }
  .sent p:not(.small) { font-size: calc(var(--u) * .34); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
  .k-form.is-sent > :not(.sent):not(.status):not(.credit) { display: none; }
  .k-form.is-sent .sent { display: flex; }
  .again { position: absolute; left: -1px; right: -1px; bottom: -1px; height: calc(var(--u) + 1px); margin: 0; display: flex; align-items: center; justify-content: center; }

  /* Footer: the dark closing screen */
  .foot { background-color: var(--ink); background-image: linear-gradient(to right, var(--grid-ink) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px); background-size: var(--u) var(--u); background-position: var(--gut) 0; color: var(--paper); --line: var(--line-ink); }
  .ft-col { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; font-size: 15px; color: rgba(255, 255, 255, .78); }
  .ft-col .small { margin-bottom: 10px; color: rgba(255, 255, 255, .5); }
  .ft-col a:hover { color: var(--paper); }
  .ft-brand { margin-bottom: 10px; color: var(--paper); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
  .ft-mark { display: flex; align-items: flex-end; overflow: hidden; padding-left: 10px; font-size: calc(var(--u) * 2.5); font-weight: 500; line-height: .74; letter-spacing: -.05em; }
  .legal > * { display: flex; align-items: center; padding: 0 20px; font-size: 13px; color: rgba(255, 255, 255, .7); }
  .legal a:hover { color: var(--paper); }

  /* Narrow screens: the hero stays pinned; the other sections flow with heights in whole cells */
  html.F .hero { height: calc(var(--rows) * var(--u) * 3); }
  html.F .sec { scroll-margin-top: var(--u); }
  html.F .sec:not(.hero) .screen { display: flex; flex-direction: column; width: calc(var(--cols) * var(--u)); margin-left: var(--gut); padding: 0; }
  html.F .sec:not(.hero) .screen > * { flex: none; }
  html.F .sec + .sec { margin-top: calc(var(--u) * 2); }
  html.F .foot { padding: calc(var(--u) * 2) 0 calc(var(--u) * 2); }
  html.F .contact { padding-bottom: calc(var(--u) * 2); }
  html.F :is(.facts, .legal) { display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-auto-rows: var(--u); }
  html.F .fact { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 0 20px; }
  html.F .fact b { font-size: 30px; }
  html.F .legal > * { grid-column: span 3; padding: 0 14px; }
  html.F :is(.c-list, .a-row, .k-info) { display: flex; flex-direction: column; }
  html.F .a-row + .a-row { margin-top: var(--u); }
  html.F .disp { align-self: auto; font-size: min(calc(var(--u) * 1.6), calc(var(--cols) * var(--u) * .16)); padding: 0 0 4px; }
  html.F .c-cta { align-self: flex-end; width: calc(var(--u) * 4 + 1px); }
  html.F .c-a { grid-template-columns: var(--u) 1fr var(--u); grid-template-rows: auto auto; align-content: center; }
  html.F .c-n { grid-row: 1 / 3; padding-left: 18px; }
  html.F .c-name { padding-left: 0; font-size: 24px; }
  html.F .c-spec { grid-column: 2; padding: 2px 0 0; font-size: 13px; }
  html.F .c-go { grid-column: 3; grid-row: 1 / 3; padding-right: 18px; }
  html.F .c-go [data-hover] { display: none; }
  html.F .m-text { padding: 10px 0 18px; font-size: 26px; }
  html.F .k-text { padding: 12px 0 14px; }
  html.F .k-form { grid-template-columns: 1fr calc(var(--u) * 3); }
  html.F .consent { grid-column: 1 / -1; padding: 0 14px; font-size: 12px; }
  html.F .send { grid-column: 2; }
  html.F .f label { padding: 0 14px; }
  html.F .f input, html.F .f textarea, html.F .f select { padding: 0 14px; font-size: 17px; }
  html.F .f textarea { padding-top: 16px; }
  html.F .f.msg label { padding-top: 21px; }
  html.F .ft-mark { font-size: calc(var(--u) * 1.9); }
  html.F .a-big { font-size: 22px; }
  html.F .h-cap { grid-template-columns: calc(var(--u) * 1.6) 1fr; padding: 12px 16px 0; font-size: 22px; }
  html.F .h-disc { left: 16px; bottom: 12px; }
  html.F .h-cat { font-size: 26px; }

  @media (prefers-reduced-motion: no-preference) {
    .ly .ch, .rise .ch { transition: transform 1.1s var(--ease) calc(var(--i) * var(--st, 16ms) + var(--d, 0s)); }
    .ly.in .ch { transform: translateY(110%); transition: none; }
    .ly.in.rev .ch { transform: translateY(-110%); }
    .ly.out .ch { transform: translateY(-110%); }
    .ly.out.rev .ch { transform: translateY(110%); }
    html.lines .rise:not(.in) .ch { transform: translateY(110%); }
    .hv .ch { transition: transform .7s var(--ease) calc(var(--i) * 14ms); }
    :is(a, button):hover .hv .ch { transform: translateY(-1.2em); }
    /* Boxes: slide in from their side, then the frame is drawn from the top-left corner.
       Ink boxes are filled from the same corner instead, so the line and the fill read as one stroke. */
    html.lines :is(.b, [data-slide]):not(.drawn) { opacity: 0; transform: translateX(var(--sx, 0px)); }
    html.lines :is(.b, [data-slide]).drawn { animation: slide-in 1s var(--ease) var(--dd, 0s) both; }
    html.lines .b.ink.drawn { animation: slide-in 1s var(--ease) var(--dd, 0s) both, fill-in 1.1s var(--ease) calc(var(--dd, 0s) + .1s) both; }
    html.lines .b:not(.drawn)::after { background-size: 0 1px, 1px 0, 1px 0, 0 1px; }
    html.lines .b.drawn::after { animation: draw 1.1s cubic-bezier(.65, 0, .35, 1) calc(var(--dd, 0s) + .35s) both; }
    html.lines .m-img.drawn img { animation: img-up 1.6s var(--ease) calc(var(--dd, 0s) + .2s) both; }
    @keyframes slide-in { from { opacity: 0; transform: translateX(var(--sx, 0px)); } to { opacity: 1; transform: none; } }
    @keyframes fill-in { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0); } }
    @keyframes img-up { from { clip-path: inset(100% 0 0 0); transform: scale(1.12); } to { clip-path: inset(0); transform: none; } }
    @keyframes draw {
      0% { background-size: 0 1px, 1px 0, 1px 0, 0 1px; }
      50% { background-size: 100% 1px, 1px 100%, 1px 0, 0 1px; }
      100% { background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }