/* Lattice Estate: the template's stylesheet, copied from index.html of the Lattice Estate HTML release. */
  /* Lattice Estate — a Formgong site template for a luxury home builder, built on Lattice.
     The page tells a build backwards: finished home, shell, frame, drawing, then the team and the form.
     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: #13110f;
    --line: #3d372f;
    --line-on-photo: rgba(244, 239, 230, .28);
    --grid: rgba(255, 236, 210, .026);
    --text: #f4efe6;
    --soft: #e6ddce;
    --muted: #bab0a1;
    --dim: #8e8576;
    --accent: #c8a46a;
    --error: #e08a7c;
    --panel: rgba(19, 17, 15, .64);
    --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;
    --serif: "Cormorant Garamond", Georgia, 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 { margin: 0; }
  ul { padding: 0; list-style: none; }
  :focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
  .skip { position: absolute; left: -999px; top: 12px; z-index: 60; background: var(--text); color: var(--bg); padding: 8px 12px; }
  .skip:focus { left: 16px; }
  main { position: relative; z-index: 2; overflow-x: clip; }

  .label { display: flex; gap: .4em; font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 239, 230, .55); }
  .label b { font-weight: 300; color: var(--accent); }
  .mono { font: 11px/1.4 var(--mono); letter-spacing: .04em; color: rgba(186, 176, 161, .7); }

  /* 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: #3d372f; }
  .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(19, 17, 15, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; }
  .logo { grid-area: 1 / 1 / 2 / 4; padding: 0 24px; font-size: 15px; font-weight: 400; letter-spacing: .22em; }
  .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); }
  .bar-cta { grid-area: 1 / -6 / 2 / -3; justify-content: center; font-size: 14px; font-weight: 400; letter-spacing: .04em; }
  .clock { grid-area: 1 / -3 / 2 / -1; justify-content: center; gap: 10px; font-size: 15px; font-weight: 400; color: var(--muted); }
  html.F .bar-cta { display: none; }

  .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-family: var(--serif); font-size: calc(var(--u) * .7); font-weight: 300; text-transform: uppercase; letter-spacing: .03em; 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: 300 12.5px var(--font); 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: #f3eee6; 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: #1d1a16; 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-word { display: flex; align-items: center; justify-content: space-between; font-family: var(--serif); font-size: calc(var(--u) * .7); font-weight: 300; 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: #9c7a3c; }

  /* 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); }
  html.L .sec { scroll-snap-align: start; }
  html.L .contact { height: 100vh; }
  html.L .contact .screen { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  html.L .foot, html.L .c-info { display: contents; }
  /* Photos and drawings behind the grid; the grid itself is repainted on top so it reads over them */
  .backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
  .gridlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 236, 210, var(--ga, .05)) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 236, 210, var(--ga, .05)) 1px, transparent 1px); background-size: var(--u) var(--u); background-position: var(--gut) 0; }
  .screen > :not(.backdrop):not(.gridlay) { z-index: 2; }
  .on-photo .b { --lc: var(--line-on-photo); }
  .panel { background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

  /* Story: four stages of the same house, rewound by scroll */
  .story { height: calc(100vh + 4 * 85vh); }
  .story .screen { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 17, 15, .72) 0%, rgba(19, 17, 15, .28) 42%, rgba(19, 17, 15, .05) 70%), linear-gradient(0deg, rgba(19, 17, 15, .7) 0%, transparent 38%); }
  /* Later stages are revealed with a soft-edged mask, so the few pixels where two AI frames differ blend instead of breaking */
  .stage img + img { -webkit-mask-image: var(--mask, linear-gradient(transparent, transparent)); mask-image: var(--mask, linear-gradient(transparent, transparent)); }
  .wipe { position: absolute; z-index: 1; top: 0; bottom: 0; left: 100%; width: 1px; background: var(--accent); box-shadow: 0 0 18px 2px rgba(200, 164, 106, .45); opacity: 0; }
  .dims { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .dims path { fill: none; stroke: var(--accent); stroke-width: 1; }
  .dims .ext { stroke: rgba(200, 164, 106, .55); stroke-dasharray: 3 4; }
  .dims text { fill: var(--accent); font: 11px var(--mono); letter-spacing: .06em; }
  .dims circle { fill: rgba(19, 17, 15, .6); stroke: var(--accent); stroke-width: 1; }
  .hl { align-self: center; font-family: var(--serif); font-size: clamp(40px, 5vw, 76px); font-weight: 300; line-height: 1; letter-spacing: .02em; text-transform: uppercase; will-change: transform, opacity; }
  .hl span { display: block; }
  .hl span + span { margin-top: .12em; color: var(--soft); font-style: italic; text-transform: none; letter-spacing: 0; }
  .counter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
  .counter [data-time] { color: var(--accent); }
  .cap { padding: 22px 26px; clip-path: inset(0); }
  .cap-in { display: flex; flex-direction: column; gap: 10px; }
  .cap h2 { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 40px); font-weight: 300; line-height: 1.05; }
  .cap p:not(.label) { font-size: 15px; color: var(--muted); }
  .stg { display: flex; align-items: center; gap: 14px; padding: 0 20px; font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: background-color .3s, color .3s; }
  .stg b { font: 300 12px var(--mono); color: var(--dim); }
  .stg:hover { color: var(--text); }
  .stg[aria-current="true"] { background: rgba(200, 164, 106, .16); color: var(--text); }
  .stg[aria-current="true"] b { color: var(--accent); }
  html.F .stg { justify-content: center; padding: 0; }
  html.F .stg span { display: none; }
  .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); } }

  /* Contact over the team photo */
  .contact .stage::after { background: linear-gradient(90deg, rgba(19, 17, 15, .78) 0%, rgba(19, 17, 15, .35) 38%, rgba(19, 17, 15, .35) 62%, rgba(19, 17, 15, .82) 100%), linear-gradient(0deg, rgba(19, 17, 15, .6), transparent 45%); }
  .head { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 14px; }
  .sub { font-size: 13px; font-weight: 300; color: var(--soft); }
  .head h2 { margin-top: 6px; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 52px); font-weight: 300; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
  .head h2 span:last-child { color: var(--soft); font-style: italic; text-transform: none; letter-spacing: 0; }
  .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(244, 239, 230, .7); }
  .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, .f select { 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 select { appearance: none; cursor: pointer; }
  .f select:invalid { color: rgba(186, 176, 161, .5); }
  .f select option { background: var(--bg); color: var(--text); }
  .f.sel::before { content: "↓"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; color: var(--dim); pointer-events: none; }
  .f ::placeholder { color: rgba(186, 176, 161, .5); }
  .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: 400; background: var(--accent); color: var(--bg); }
  .send:hover { background: var(--soft); }
  .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(--soft); }
  .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-family: var(--serif); font-size: 26px; font-weight: 300; line-height: 1.3; }
  .c-form.is-sent > :not(.sent):not(.status) { display: none; }
  .c-form.is-sent .sent { display: flex; }
  .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(--soft); }
  .foot a:hover { color: var(--text); }

  /* Narrow screens: the story stays pinned; the contact section flows with heights in whole cells */
  html.F .contact .screen { display: flex; flex-direction: column; width: calc(var(--cols) * var(--u)); margin-left: var(--gut); padding: calc(var(--u) * 2) 0 calc(var(--u) * 2); }
  html.F .contact .screen > * { flex: none; }
  html.F .contact .backdrop, html.F .contact .gridlay { left: calc(var(--gut) * -1); right: calc(var(--gut) * -1); }
  html.F .contact .gridlay { background-position: var(--gut) 0; }
  html.F .foot { display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-auto-rows: var(--u); }
  html.F .foot > * { grid-column: span 3; }
  html.F .c-info { display: flex; flex-direction: column; }
  html.F .cap h2 { font-size: 28px; }
  html.F .cap { padding: 18px 18px; }
  /* 56px cells: tighter field padding so the value fits under the label */
  html.F .f label { top: 6px; }
  html.F .f input, html.F .f textarea, html.F .f select { padding: 23px 14px 4px; font-size: 16px; line-height: 1.35; }

  .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-on-photo); pointer-events: none; }
  .prog i { position: absolute; left: 0; top: -6px; width: 1px; height: 13px; background: var(--accent); }

  @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; }
    @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; }
    .wipe { display: none; }
  }