/* Lattice: the template's stylesheet, copied from index.html of the Lattice HTML release. */
  /* Lattice — a Formgong site template.
     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 {
    --bg: #1c1c1c;
    --line: #404040;
    --grid: rgba(255, 255, 255, .024);
    --text: #fafafa;
    --soft: #dadadc;
    --muted: #b0b0b7;
    --dim: #909094;
    --accent: #43cabc;
    --error: #e08a7c;
    --u: 75px;
    --gut: 45px;
    --cols: 12;
    --rows: 10;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --font: "Montserrat", -apple-system, system-ui, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  html.L { scroll-snap-type: y proximity; }
  body {
    margin: 0; color: var(--text); font: 200 16.5px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip;
    background-color: var(--bg);
    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;
  }
  html.L body { background-attachment: fixed; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  p, h1, h2, ul, figure, blockquote { margin: 0; }
  ul { padding: 0; list-style: none; }
  :focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip { position: absolute; left: -999px; top: 12px; z-index: 60; background: var(--text); color: var(--bg); padding: 8px 12px; }
  .skip:focus { left: 16px; }
  .orb { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  main { position: relative; z-index: 2; overflow-x: clip; }

  .label { display: flex; gap: .4em; font-size: 12.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: rgba(250, 250, 250, .5); }
  .label b { font-weight: 300; color: rgba(218, 218, 220, .5); }
  .mono { font: 11px/1.4 var(--mono); letter-spacing: .02em; color: rgba(176, 176, 183, .55); }

  /* 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.
     Four 1px gradients: top, left, right, bottom. */
  @property --lc { syntax: "<color>"; inherits: true; initial-value: #404040; }
  .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;
  }
  .btn { display: flex; align-items: center; justify-content: center; transition: background-color .3s, color .3s; }
  .btn:hover { background: var(--soft); color: var(--bg); }

  /* Header */
  .bar { position: fixed; top: 0; left: 0; right: 0; z-index: 25; overflow-x: clip; 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; border-top: 0; background: rgba(28, 28, 28, .88); pointer-events: auto; }
  .logo { grid-area: 1 / 1 / 2 / 4; padding: 0 24px; font-size: 18px; font-weight: 400; letter-spacing: .02em; }
  .logo span { color: var(--accent); }
  .menu-btn { grid-area: 1 / 4 / 2 / 5; justify-content: center; font-size: 18.5px; font-weight: 400; color: var(--muted); }
  .menu-btn:hover { color: var(--text); }
  .clock { grid-area: 1 / -3 / 2 / -1; justify-content: center; gap: 10px; font-size: 15px; font-weight: 400; color: var(--muted); }

  .menu { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: calc(var(--u) * var(--mt, 3)) 0 0 calc(var(--gut) + var(--u)); background-color: var(--bg); 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; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s; }
  .menu.open { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--ease); }
  .menu a { display: flex; align-items: center; gap: 14px; width: fit-content; height: var(--u); font-size: calc(var(--u) * .74); font-weight: 100; text-transform: uppercase; opacity: 0; transform: translateY(40px); transition: transform .8s var(--ease), opacity .8s var(--ease), color .3s; }
  .menu.open a { opacity: 1; transform: none; transition-delay: calc(.15s + var(--i) * .06s), calc(.15s + var(--i) * .06s), 0s; }
  .menu a:hover { color: var(--accent); }
  .menu a b { align-self: flex-start; margin-top: 14px; font-size: 12.5px; font-weight: 300; color: var(--dim); }

  /* Intro */
  .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: #f7f7f7; background-image: linear-gradient(to right, rgba(0, 0, 0, .04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .04) 1px, transparent 1px); background-size: var(--u) var(--u); background-position: var(--gut) 0; color: #18181b; cursor: pointer; clip-path: inset(0); transition: clip-path 1s var(--ease); }
  .js-intro .intro { display: grid; }
  .js-intro body { overflow: hidden; }
  .intro.out { clip-path: inset(0 0 100% 0); }
  .intro .frame i { border-color: #c9c9ce; }
  .intro-word { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * .66); font-weight: 100; line-height: 1; }
  .intro-word span { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform 1s var(--ease); }
  .intro.in .intro-word span { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms); }
  .intro-word span:nth-child(-n+3) { color: #2f9d92; }

  /* Corner frame: each corner is one cell long and sits on the frame's grid lines */
  .frame { position: relative; margin: 0 -1px -1px 0; }
  .frame i { position: absolute; width: var(--u); height: var(--u); border: 1px solid var(--line); }
  .frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
  .frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
  .frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
  .frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
  .readout { position: absolute; left: 0; top: calc(100% + 10px); white-space: nowrap; }

  /* Screens */
  .sec { position: relative; }
  .screen { position: relative; }
  html.L .screen { position: sticky; top: 0; height: 100vh; overflow: hidden; 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); }
  html.L .sec { scroll-snap-align: start; }
  html.L .hero { height: 200vh; }
  html.L .work { height: calc(100vh + 5 * 70vh); }
  html.L .services { height: 150vh; }
  html.L .about { height: 170vh; }
  html.L .contact { height: 100vh; }
  html.L .pbar, html.L .stats, html.L .tools, html.L .foot, html.L .c-info { display: contents; }

  html.F .screen { display: flex; flex-direction: column; width: calc(var(--cols) * var(--u)); margin-left: var(--gut); }
  html.F .screen > * { flex: none; }
  html.F .hero .screen { display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-template-rows: repeat(var(--hrows, 12), var(--u)); width: auto; margin: 0; padding-left: var(--gut); overflow: hidden; }
  html.F .sec + .sec { margin-top: calc(var(--u) * 2); }
  html.F .contact { padding-bottom: calc(var(--u) * 2); }
  html:not(.js) .hero .screen { display: flex; flex-direction: column; gap: 16px; padding: 120px 16px; }

  /* Hero */
  .h-lab { align-self: center; }
  .h-lab.r { justify-content: flex-end; text-align: right; }
  .h-lab a:hover { color: var(--text); }
  .hw { font-size: clamp(20px, 2.55vw, 36.5px); font-weight: 200; line-height: var(--u); text-transform: uppercase; white-space: nowrap; will-change: transform; }
  .hw span { display: block; color: var(--muted); }
  .hw span + span { color: var(--dim); }
  .hw.r { text-align: right; }

  /* Section heads */
  .head { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 14px; }
  .sub { font-size: 12.5px; font-weight: 300; color: var(--dim); }
  .head h2 { margin-top: 6px; font-size: clamp(28px, 2.7vw, 39px); font-weight: 200; line-height: 1; text-transform: uppercase; }
  .head h2 span:first-child { color: var(--soft); }
  .cta { padding: 0 16px; }

  /* Work */
  .p-orb, .s-orb, .a-orb, .c-orb { position: relative; }
  .p-orb .mono, .s-orb .mono { position: absolute; left: 14px; bottom: 12px; }
  .p-shot { position: relative; clip-path: inset(0); --m-bg: #10201d; }
  .mock, .phone { position: absolute; background: var(--m-bg); transition: background-color .8s var(--ease); }
  .mock-dots { position: absolute; left: 10px; top: 9px; display: flex; gap: 5px; }
  .mock-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
  .mock img, .phone img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease), transform 1.2s var(--ease); }
  .mock img { top: 22px; height: calc(100% - 22px); }
  .phone img { object-position: left top; }
  .mock img.on, .phone img.on { opacity: 1; transform: none; }
  .p-thumbs { display: grid; grid-auto-rows: var(--u); align-content: start; overflow: hidden; }
  .p-thumbs button { font: 11px var(--mono); color: var(--dim); transition: background-color .3s, color .3s; }
  .p-thumbs button:hover { color: var(--text); }
  .p-thumbs button[aria-current="true"] { background: rgba(255, 255, 255, .07); color: var(--accent); }
  .p-text { padding: 24px; clip-path: inset(0); font-size: 15px; color: var(--muted); }
  .p-in { display: flex; flex-direction: column; gap: 14px; }
  .p-text .label { flex-direction: column; gap: 6px; }
  .pbar .btn { color: var(--muted); }
  .pb-name { display: flex; align-items: center; justify-content: center; clip-path: inset(0); font-size: 20px; font-weight: 300; text-transform: lowercase; }
  .pb-name span { display: block; }
  .swap { animation: rise .8s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(-10px); } }

  /* Services */
  .rot { display: flex; flex-direction: column; justify-content: center; clip-path: inset(0); padding: 24px 28px; }
  .rot-sq { display: flex; gap: 6px; margin-bottom: 22px; }
  .rot-sq button { width: 13px; height: 13px; background: var(--line); transition: background-color .3s; }
  .rot-sq button:hover { background: var(--dim); }
  .rot-sq button[aria-current="true"] { background: var(--soft); }
  .rot-w span { display: block; width: fit-content; font-size: clamp(30px, min(3.5vw, 5.4vh), 50px); font-weight: 300; line-height: 1.1; text-transform: lowercase; }
  .rot-w2 { margin-top: 6px; padding: 0 12px; background: var(--soft); color: var(--bg); }
  .rot-desc { max-width: 34ch; margin-top: 20px; font-size: 15px; color: var(--muted); }
  .rot.go .rot-w1 { animation: rise .7s var(--ease) both; }
  .rot.go .rot-w2 { animation: wipe .8s var(--ease) .1s both; }
  .rot.go .rot-desc { animation: rise .8s var(--ease) .18s both; }
  @keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  .st { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 24px; }
  .st-txt { font-size: 20px; font-weight: 300; line-height: 1.25; }
  .num { font-size: clamp(30px, 2.8vw, 40px); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }
  .quotes { position: relative; overflow: hidden; margin: 0 -1px -1px 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .track { display: flex; height: 100%; margin-left: -1px; transition: transform .9s var(--ease); }
  .q { flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; width: calc(var(--cw, 6) * var(--u) + 1px); height: 100%; margin-right: -1px; padding: 20px 24px; border: 1px solid var(--line); }
  .q blockquote { font-size: 14px; color: var(--muted); }
  .q figcaption { font-size: 13px; color: var(--soft); }
  .q figcaption span { color: var(--dim); }

  /* About */
  .a-text { display: flex; align-items: center; padding: 28px 32px; font-size: clamp(22px, 2.6vw, 40px); font-weight: 200; line-height: 1.35; }
  .js .a-text .w { opacity: .16; transition: opacity .35s; }
  .js .a-text .w.lit { opacity: 1; }
  .tools > * { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 300; color: var(--dim); }

  /* Contact */
  .box { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 20px; font-size: 15px; color: var(--soft); }
  .box a:hover { color: var(--accent); }
  .c-form { position: relative; display: grid; grid-auto-rows: var(--u); align-content: start; }
  .f.msg { grid-row: span var(--msg, 2); }
  .f:focus-within { z-index: 1; --lc: rgba(250, 250, 250, .6); }
  .f label { position: absolute; left: 14px; top: 9px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); pointer-events: none; transition: color .3s; }
  .f:focus-within label { color: var(--accent); }
  .f input, .f textarea { display: block; width: 100%; height: 100%; padding: 30px 14px 10px; border: 0; outline: none; background: transparent; color: var(--text); font: 200 16.5px/1.5 var(--font); resize: none; }
  .f ::placeholder { color: rgba(176, 176, 183, .45); }
  .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; }
  .send { justify-content: space-between; padding: 0 24px; font-weight: 300; }
  .send .arrow { transition: transform .4s var(--ease); }
  .send:hover .arrow { transform: translateX(6px); }
  .send[disabled] { opacity: .6; cursor: progress; }
  .status { position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 10px; font-size: 13px; color: var(--muted); }
  .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; }
  .sent p:not(.label) { font-size: 20px; font-weight: 200; line-height: 1.4; }
  .sent .label b { color: var(--accent); }
  .c-form.is-sent > :not(.sent):not(.status) { display: none; }
  .c-form.is-sent .sent { display: flex; animation: rise .8s var(--ease) both; }
  /* Bottom row of the panel: shares the panel's side and bottom borders, top border on a grid line */
  .again { position: absolute; left: -1px; right: -1px; bottom: -1px; height: calc(var(--u) + 1px); margin: 0; }
  .foot > * { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 300; color: var(--dim); }
  .foot a:hover { color: var(--text); }

  /* Flowing layout on narrow screens */
  html.F .pbar { display: grid; grid-template-columns: var(--u) var(--u) 1fr var(--u); grid-template-rows: var(--u); }
  html.F .p-thumbs { grid-auto-flow: column; grid-auto-columns: var(--u); grid-template-rows: var(--u); }
  html.F .stats, html.F .tools, html.F .foot { display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-auto-rows: var(--u); }
  html.F .st { grid-column: span 3; grid-row: span 2; }
  html.F .foot > * { grid-column: span 3; }
  html.F .tools > * { grid-column: span 2; }
  html.F .c-info { display: flex; flex-direction: column; }
  html.F .a-text { font-size: 22px; padding: 22px 20px; }
  html.F .readout { display: none; }
  html.F .h-lab { font-size: 11px; }

  .prog { display: none; }
  html.L .prog { display: block; position: fixed; z-index: 9; left: var(--gut); top: calc((var(--rows) - 1) * var(--u)); width: calc(var(--cols) * var(--u)); height: 1px; background: var(--line); pointer-events: none; }
  .prog i { position: absolute; left: 0; top: -6px; width: 1px; height: 13px; background: var(--soft); }

  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] { clip-path: inset(-20px 100% -20px -20px); transform: translateX(-40px); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
    .js [data-reveal].in { clip-path: inset(-20px); transform: none; }
    /* Boxes: slide in from their side, then the frame is drawn from the top-left corner */
    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: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; }
    /* Hero corners open from their own corner point */
    main .frame i:nth-child(1) { --c0: inset(0 100% 100% 0); }
    main .frame i:nth-child(2) { --c0: inset(0 0 100% 100%); }
    main .frame i:nth-child(3) { --c0: inset(100% 100% 0 0); }
    main .frame i:nth-child(4) { --c0: inset(100% 0 0 100%); }
    html.lines main .frame:not(.drawn) i { clip-path: var(--c0); }
    html.lines main .frame.drawn i { animation: corner 1.1s cubic-bezier(.65, 0, .35, 1) calc(var(--dd, 0s) + .2s) both; }
    @keyframes corner { from { clip-path: var(--c0); } to { clip-path: inset(0); } }
    @keyframes slide-in { from { opacity: 0; transform: translateX(var(--sx, 0px)); } to { opacity: 1; 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; }
    .track { transition: none; }
    .quotes { overflow-x: auto; }
  }