/* Halftone: the template's stylesheet, copied from index.html of the Halftone HTML release. */
  /* Halftone — a Formgong site template for an architecture studio.
     Sizes follow --u, one 1920th of the window (capped at 1920px), so the page scales as one drawing. */
  :root {
    --accent: #f2621c;
    --accent-2: #ffb04a;
    --ink: #000;
    --paper: #fff;
    --rule: #e5e5e5;
    --error: #a3290c;
    --u: calc(min(100vw, 1920px) / 1920);
    --fs-display: calc(212 * var(--u));
    --fs-h1: calc(80 * var(--u));
    --fs-h2: calc(48 * var(--u));
    --fs-lead: max(15px, calc(32 * var(--u)));
    --fs-body: max(14px, calc(20 * var(--u)));
    --fs-ui: max(12px, calc(16 * var(--u)));
    --fs-small: max(11px, calc(14 * var(--u)));
    --gutter: calc(80 * var(--u));
    --bar: max(30px, calc(40 * var(--u)));
    --ease: cubic-bezier(.16, 1, .3, 1);
    --display: "Archivo", "Arial Black", Arial, sans-serif;
    --body: "Figtree", system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-ui)/1.4 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  .loading body { overflow: hidden; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  p, h1, h2, h3, ul, figure { margin: 0; }
  h1, h2, h3 { font-weight: inherit; }
  ul { padding: 0; list-style: none; }
  img { display: block; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .skip { position: absolute; left: -999px; top: 12px; z-index: 99; 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; }
  .d { font-family: var(--display); font-stretch: 125%; font-weight: 600; text-transform: uppercase; line-height: 1; }
  .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* The halftone screen: a fine grid of dark dots multiplied over a photo */
  .dots::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(0, 0, 0, .34) .9px, transparent 1.5px) 0 0 / 4px 4px; mix-blend-mode: multiply; }

  /* Loader: orange, four corner words, and the page itself tilted small in the middle */
  .loader { position: fixed; inset: 0; z-index: 90; display: none; background: var(--accent); color: var(--ink); font-size: var(--fs-ui); }
  .loading .loader { display: block; }
  .loader p { position: absolute; }
  .l-tl { left: var(--gutter); top: calc(var(--gutter) * .6); }
  .l-tr { right: var(--gutter); top: calc(var(--gutter) * .6); }
  .l-bl { left: var(--gutter); bottom: calc(var(--gutter) * .6); }
  .l-br { right: var(--gutter); bottom: calc(var(--gutter) * .6); font-variant-numeric: tabular-nums; }
  .l-card { position: absolute; inset: 0; overflow: hidden; background: var(--ink); transform: rotate(-8deg) scale(.5); transform-origin: 50% 50%; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); transition: transform 1.1s var(--ease), opacity .5s; }
  .l-card img { opacity: .92; }
  .l-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 1; background: var(--paper); }
  .loader.zoom .l-card { transform: none; }
  .loader.zoom { background: transparent; transition: background-color .4s .3s; }
  .loader.zoom p { opacity: 0; transition: opacity .3s; }
  .loader.gone { opacity: 0; transition: opacity .5s; pointer-events: none; }

  /* Header: three blocks in a row — menu, the mark, get in touch — inset from the edges */
  .top { position: fixed; z-index: 60; top: calc(12 * var(--u)); left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 1fr 1fr 1fr; height: var(--bar); transition: transform .6s var(--ease); }
  .top.hide { transform: translateY(calc(-100% - 20px)); }
  .top > * { display: flex; align-items: center; padding: 0 calc(24 * var(--u)); font-size: var(--fs-small); font-family: var(--display); font-stretch: 125%; font-weight: 600; text-transform: uppercase; }
  .t-menu { background: var(--paper); gap: 10px; }
  .t-menu i { display: inline-block; width: 14px; height: 6px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .t-mark { background: var(--ink); color: var(--accent); justify-content: center; }
  .t-mark span { font-size: calc(var(--bar) * .6); font-weight: 700; letter-spacing: .02em; }
  .t-cta { background: var(--accent); justify-content: flex-end; gap: 10px; }
  .t-cta b { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform .4s var(--ease); }
  .t-cta:hover b { transform: scale(1.5); }
  .menu { position: fixed; z-index: 55; top: 0; left: 0; right: 0; padding: calc(var(--bar) + 12 * var(--u) + 40px) var(--gutter) 40px; background: var(--paper); border-bottom: 1px solid var(--rule); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
  .menu.open { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease); }
  .menu-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  .menu ul a { display: block; font-size: var(--fs-h2); padding: 4px 0; transition: color .3s; }
  .menu ul a:hover { color: var(--accent); }
  .menu p { max-width: 26em; font-size: var(--fs-lead); line-height: 1.15; }
  .menu .small { margin-top: 24px; display: flex; gap: 20px; font-size: var(--fs-small); color: #555; }

  /* Hero: a pinned halftone photo that turns into a second frame as you scroll, the title split to the edges */
  .hero { position: relative; height: 200vh; background: var(--ink); }
  .h-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .h-frame { position: absolute; inset: 0; }
  .h-frame + .h-frame { opacity: var(--f, 0); }
  .h-frame img { transform: scale(calc(1.08 - var(--p, 0) * .08)); }
  .h-title { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); top: 50%; translate: 0 -50%; display: flex; justify-content: space-between; gap: 40px; font-size: calc(70 * var(--u)); white-space: nowrap; }
  .h-title span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform 1.4s var(--ease); }
  .js:not(.ready) .h-title span:first-child { transform: translateX(-60vw); }
  .js:not(.ready) .h-title span:last-child { transform: translateX(60vw); }
  .h-down { position: absolute; z-index: 2; left: 50%; bottom: 28px; translate: -50% 0; color: var(--paper); font-size: var(--fs-small); }

  /* Intro statement */
  .intro { display: flex; justify-content: center; padding: calc(220 * var(--u)) var(--gutter); }
  .intro p { max-width: 21em; text-align: center; font-size: var(--fs-lead); line-height: 1.12; color: var(--accent); }

  /* Projects: full-screen photos that stack, each with a white bar along the bottom */
  /* Projects share one pinned stage. Each holds the screen for a while, then the next slides over it,
     each from its own side (data-from: right, bottom or left), so the entrances do not repeat. */
  #work { position: relative; height: calc(var(--n, 4) * 170vh); }
  .p-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
  .project { position: absolute; inset: 0; overflow: hidden; background: var(--ink); will-change: transform; }
  .project img { transform: scale(calc(1.06 - var(--e, 1) * .06)); }
  .project .bar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 24px; padding: 18px var(--gutter); background: var(--paper); transform: translateY(100%); transition: transform .9s var(--ease); }
  .project.in .bar { transform: none; }
  .bar .label { font-size: var(--fs-small); }
  .bar h2 { font-size: max(14px, calc(24 * var(--u))); margin-bottom: 4px; }
  .bar p { font-size: var(--fs-small); max-width: 46em; }
  .bar a { justify-self: end; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; height: var(--bar); background: var(--ink); color: var(--paper); font-size: max(11px, calc(16 * var(--u))); transition: background-color .3s; }
  .bar a:hover { background: var(--accent); color: var(--ink); }

  /* Clarity: huge words; a strip of photos rises over them and the middle one opens to the whole screen */
  .clarity { position: relative; height: 340vh; background: var(--paper); }
  .c-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .c-words { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; translate: 0 -50%; font-size: var(--fs-display); font-weight: 700; line-height: .92; }
  .c-words span { display: block; }
  .c-words .r { text-align: right; color: var(--accent); }
  .c-words .s { display: flex; justify-content: space-between; }
  .c-strip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); transform: translateY(calc((1 - var(--a, 0)) * 100vh)); }
  .c-strip figure { position: relative; overflow: hidden; flex: none; width: 26vw; height: 40vh; }
  .c-strip figure.mid { width: calc(30vw + var(--b, 0) * 70vw); height: calc(40vh + var(--b, 0) * 60vh); z-index: 1; }
  .c-strip figure:not(.mid) { opacity: calc(1 - var(--b, 0)); }
  .c-text { position: absolute; z-index: 2; left: var(--gutter); top: 0; bottom: 0; width: min(560px, 34vw); display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--bar) + 60px) 40px 60px; background: var(--paper); font-size: var(--fs-body); line-height: 1.35; transform: translateX(calc((var(--t, 0) - 1) * 110%)); }
  .c-text p + p { text-align: right; }

  /* Services */
  .services { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 100vh; }
  .s-list { display: flex; flex-direction: column; justify-content: flex-end; gap: 30px; padding: 80px var(--gutter); }
  .s-list h2 { font-size: var(--fs-small); }
  .s-list li { font-size: var(--fs-h2); line-height: 1.08; }
  .s-list li.rise { transform: translateX(-60px); }
  .s-list li.rise.in { transform: none; }
  .s-photo { position: relative; overflow: hidden; }

  /* Stats on orange, with a pattern of rounded tiles */
  .stats { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--accent); color: var(--paper); }
  .st-nums { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 100px var(--gutter); }
  .st-nums b { display: block; font-size: var(--fs-display); line-height: .9; }
  .st-nums span { display: block; max-width: 12em; margin-top: 10px; font-size: var(--fs-lead); line-height: 1.05; }
  .st-pattern { min-height: 70vh; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(-35 60 60)'%3E%3Crect x='-10' y='18' width='70' height='34' rx='17' fill='url(%23g)'/%3E%3Crect x='70' y='18' width='70' height='34' rx='17' fill='url(%23g)'/%3E%3Crect x='30' y='70' width='70' height='34' rx='17' fill='url(%23g)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px, var(--accent); background-position: 0 calc(var(--sp, 0) * -240px); }

  /* Footer with the big wordmark */
  .foot { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 30px; padding: 80px var(--gutter) 40px; }
  .f-nav a, .f-legal a { display: block; font-size: var(--fs-small); padding: 3px 0; transition: color .3s; }
  .f-nav a:hover, .f-legal a:hover { color: var(--accent); }
  .f-legal { text-align: right; }
  .f-mark { grid-column: 2; grid-row: 1 / 3; color: var(--accent); }
  .f-mark { display: flex; flex-direction: column; align-items: center; font-size: calc(var(--fs-display) * 1.55); line-height: .82; }
  .f-mark span { font-weight: 700; }
  .f-studio { font-size: var(--fs-small); line-height: 1.5; }
  .f-studio h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .f-studio h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
  .f-studio:last-of-type { text-align: right; }
  .f-studio:last-of-type h2 { justify-content: flex-end; }
  .f-credit { grid-column: 1 / -1; font-size: var(--fs-small); color: #666; }

  /* Contact: an orange card over a photo, the socials along the bottom */
  .contact { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px var(--gutter) 40px; overflow: hidden; color: var(--paper); }
  .contact > img { z-index: 0; }
  .contact.dots::after { z-index: 1; }
  .card { position: relative; z-index: 2; width: min(480px, 100%); background: var(--accent); color: var(--ink); padding: 0 24px 26px; transform: translateY(60px); opacity: 0; transition: transform 1s var(--ease), opacity 1s var(--ease); }
  .contact.in .card { transform: none; opacity: 1; }
  .card .tab { display: inline-block; margin: 0 -24px 18px; padding: 8px 24px; background: var(--paper); font-size: var(--fs-small); }
  .card h2 { font-size: var(--fs-h2); line-height: 1.02; margin-bottom: 20px; }
  .fld { display: block; border-bottom: 1.5px solid var(--ink); }
  .fld + .fld { margin-top: 6px; }
  .fld input, .fld textarea { display: block; width: 100%; padding: 12px 0 8px; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--ink); font: 400 var(--fs-body)/1.3 var(--body); resize: none; }
  .fld textarea { height: 5.5em; }
  .fld ::placeholder { color: var(--ink); opacity: 1; }
  .fld:focus-within { border-color: var(--paper); }
  .fld:has(:user-invalid) { border-color: var(--error); }
  .fld:has(:user-invalid) ::placeholder { color: var(--error); }
  .req { margin: 8px 0 18px; text-align: right; font-size: var(--fs-small); }
  .send { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(var(--bar) + 6px); background: var(--ink); color: var(--paper); font-size: max(11px, calc(16 * var(--u))); transition: background-color .3s, color .3s; }
  .send:hover { background: var(--paper); color: var(--ink); }
  .send[disabled] { opacity: .6; cursor: progress; }
  .status { min-height: 1.4em; margin-top: 10px; font-size: var(--fs-small); }
  .status.err { color: var(--error); font-weight: 500; }
  .sent { display: none; padding: 10px 0 6px; outline: none; }
  .sent p { font-size: var(--fs-lead); line-height: 1.15; margin-bottom: 18px; }
  #fg-form.is-sent > :not(.sent) { display: none; }
  #fg-form.is-sent .sent { display: block; }
  [data-turnstile] { margin-bottom: 14px; }
  .credit { margin-top: 14px; text-align: center; font-size: var(--fs-small); }
  .credit a { border-bottom: 1px solid currentColor; }
  .credit a:hover { color: var(--paper); }
  .socials { position: relative; z-index: 2; align-self: stretch; display: flex; justify-content: space-between; margin-top: auto; padding-top: 60px; font-size: var(--fs-h2); }
  .socials a { transition: color .3s; }
  .socials a:hover { color: var(--accent); }

  /* Shared entrance: lines rise once into view */
  .rise { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
  .rise.in { opacity: 1; transform: none; }

  /* Narrow screens */
  @media (max-width: 760px) {
    :root { --gutter: 16px; --bar: 40px; }
    .top { top: 10px; }
    .top > * { padding: 0 12px; font-size: 11px; }
    .t-cta span { display: none; }
    .t-cta { justify-content: center; }
    .t-cta::before { content: "Contact"; }
    .h-title { flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: min(30px, 7vw); }
    .intro { padding: 120px 16px; }
    .intro p { font-size: 22px; }
    .project .bar { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
    .bar a { max-width: none; justify-self: stretch; }
    .c-words { font-size: 10vw; }
    .c-strip figure { width: 40vw; height: 30vh; }
    .c-strip figure.mid { width: calc(44vw + var(--b, 0) * 56vw); height: calc(30vh + var(--b, 0) * 70vh); }
    .c-text { left: 0; width: 86vw; padding: 80px 20px 40px; font-size: 17px; }
    .services, .stats { grid-template-columns: 1fr; }
    .s-list { padding: 60px 16px; }
    .s-list li { font-size: 24px; }
    .s-photo { min-height: 60vh; }
    .st-nums { padding: 60px 16px; }
    .st-nums b { font-size: 26vw; }
    .st-nums span { font-size: 20px; }
    .st-pattern { min-height: 40vh; }
    .foot { grid-template-columns: 1fr 1fr; padding: 60px 16px 30px; }
    .f-mark { grid-column: 1 / -1; grid-row: auto; order: -1; }
    .contact { padding: 100px 16px 30px; }
    .card h2 { font-size: 26px; }
    .socials { font-size: 18px; }
    .menu-in { grid-template-columns: 1fr; }
    .menu ul a { font-size: 30px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .rise, .card { opacity: 1 !important; transform: none !important; transition: none !important; }
    .project .bar { transform: none; transition: none; }
    .h-title span { transform: none !important; }
    .clarity { height: auto; }
    .c-pin { position: relative; height: auto; display: grid; gap: 30px; padding: 120px 0; }
    .c-words, .c-strip, .c-text { position: static; translate: none; transform: none; }
    .c-strip figure.mid { width: 30vw; height: 40vh; }
    .c-text { width: auto; margin: 0 var(--gutter); padding: 0; }
    .hero { height: 100vh; }
    #work { height: auto; }
    .p-stage { position: static; height: auto; overflow: visible; }
    .project { position: relative; height: 100vh; transform: none !important; }
  }