/* ArchiMag concept demo. Tokens: docs/brief.md "Chosen design direction". Order matters: the scroll-driven
   block comes after the load animations so its combined animation lists win the cascade. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: block;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url(instrument-sans-8b74e9bc.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg: #EEF0EC; --ink: #1D2226; --mute: #515A62; --red: #B3362B; --on-red: #FFFFFF; --wash: #E0E1DA; --rule: #C6CAC4;
  --stone: #D6D2C7; --reveal: #2B3136; --door: #2A3035; --g1: #B8C6CF; --g2: #5E6B75; --g3: #323B42; --sky: #DCE3E6;
  --brick: #A88C7E; --newclad: #454B50;
  --gutter: clamp(20px, 4vw, 48px); --section: clamp(80px, 12vw, 160px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181B; --ink: #E6E7E2; --mute: #A4ABB1; --red: #E26A5E; --on-red: #15181B; --wash: #212529; --rule: #31363B;
    --stone: #3A3E42; --reveal: #0C0E10; --door: #0B0D0F; --g1: #5A6670; --g2: #262D33; --g3: #171B1F; --sky: #1B2126;
    --brick: #5A4A43; --newclad: #1F2427;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.55 "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: var(--gutter); top: 8px; z-index: 10; padding: 10px 16px; background: var(--ink); color: var(--bg); transform: translateY(-200%); }
.skip:focus { transform: none; }
h1 { font-size: 16px; font-weight: 500; color: var(--mute); margin: 0 0 20px; }
h2 { font-stretch: 75%; font-weight: 600; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 56px; max-width: 20ch; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0 0 8px; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 0; background: var(--red); color: var(--on-red); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; border-radius: 2px; white-space: nowrap; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.link { font-weight: 600; font-size: 16px; text-underline-offset: 5px; padding: 12px 0; }

/* Header: outside main, laid over the hero */
header.site { position: absolute; inset: 0 0 auto; z-index: 3; }
header.site .wrap { display: flex; align-items: center; gap: 40px; height: 72px; }
.brand { display: flex; align-items: center; min-height: 44px; gap: 10px; text-decoration: none; font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.brand svg { width: 20px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
nav { margin-left: auto; }
nav ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; font-size: 16px; }
nav a { display: inline-block; min-width: 44px; text-align: center; text-decoration: none; padding: 12px 6px; }
nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.menu-btn { display: none; margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 4px; background: none; border: 0; color: inherit; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; }
#menu { inset: 0 0 auto 0; width: 100%; margin: 0; border: 0; padding: 20px var(--gutter) 28px; background: var(--bg); color: var(--ink); box-shadow: 0 12px 40px rgb(0 0 0 / .18); }
#menu ul { list-style: none; margin: 0 0 16px; padding: 0; font-size: 22px; }
#menu a:not(.btn) { display: block; padding: 10px 0; text-decoration: none; }

/* Hero */
.hero { position: relative; }
.stage { position: sticky; top: 0; height: 100dvh; min-height: 560px; overflow: hidden; }
.hero .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; min-height: 100%; padding-top: 72px; padding-bottom: 40px; }
.copy { position: relative; z-index: 1; padding-top: 24px; }
.display { font-stretch: 75%; font-weight: 600; font-size: clamp(46px, 6.2vw, 92px); line-height: 1; letter-spacing: -.015em; margin: 0 0 26px; text-wrap: balance; }
.sub { max-width: 34ch; color: var(--mute); margin: 0 0 34px; }
.ctas { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.sheet { border: 1px solid var(--rule); padding: 28px 28px 0; height: calc(100dvh - 72px - 80px); min-height: 440px; max-height: 900px; display: flex; flex-direction: column; position: relative; isolation: isolate; }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sky) 0%, transparent 70%); }
.sheet .facade { flex: 1; min-height: 0; width: 100%; overflow: visible; }
.titleblock { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule); margin-top: 20px; padding: 10px 0 12px; font-size: 13px; color: var(--mute); }
.through { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; z-index: 2; }

/* The drawing (final state by default) */
.facade .ln path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.facade .ln-con path { stroke: var(--red); stroke-width: .8; }
.facade .ln-tra path, .facade .ln-orn path { stroke-width: 1.1; }
.facade .ln-con { opacity: .2; }
.facade .ln:not(.ln-con) { opacity: .62; }
.fill-wall path { fill: var(--stone); }
.fill-glass path { fill: var(--reveal); }
.fill-pane path { fill: url(#glassG); }
.fill-door path { fill: var(--door); }

@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes appear { from { opacity: 0; } }
@keyframes dim { from { opacity: 1; } }
@keyframes walk {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.6); }
  100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(30); }
}
@keyframes leave { to { opacity: 0; } }
@keyframes unframe { to { border-color: transparent; } }
@keyframes arrive { to { opacity: 1; } }

/* 1. On load: the drawing draws itself, then the rendering develops */
@media (prefers-reduced-motion: no-preference) {
  .facade .ln path { stroke-dasharray: 1 1; animation: draw .9s cubic-bezier(.65, 0, .35, 1) backwards; animation-delay: calc(var(--b) + var(--i) / var(--n) * var(--s)); }
  .ln-con { --b: .1s; --s: .8s; } .ln-str { --b: .6s; --s: .9s; } .ln-arc { --b: 1.2s; --s: 1.1s; } .ln-tra { --b: 1.9s; --s: 1.2s; } .ln-orn { --b: 2.5s; --s: .9s; }
  .fill-wall, .render, .fill-glass, .fill-pane, .fill-door { animation: appear 1.2s 3.3s backwards; }
  .facade .ln:not(.ln-con), .facade .ln-con { animation: dim .9s 3.6s backwards; }
}

/* 2. On scroll: the walk through the portal (after the load rules, so these lists win) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body { timeline-scope: --hero; }
    .hero { height: 220vh; view-timeline: --hero block; }
    .facade .world { transform-box: view-box; transform-origin: 500px 1080px; animation: walk linear both; animation-timeline: --hero; animation-range: contain 0% contain 92%; }
    header.site, .copy, .titleblock { animation: leave linear both; animation-timeline: --hero; animation-range: contain 0% contain 18%; }
    .sheet { animation: unframe linear both; animation-timeline: --hero; animation-range: contain 0% contain 18%; }
    .sheet::before { animation: leave linear both; animation-timeline: --hero; animation-range: contain 0% contain 18%; }
    .facade .ln-con { animation: dim .9s 3.6s backwards, leave linear both; animation-timeline: auto, --hero; animation-range: normal, contain 0% contain 18%; }
    .facade .ln:not(.ln-con) { animation: dim .9s 3.6s backwards, leave linear both; animation-timeline: auto, --hero; animation-range: normal, contain 30% contain 55%; }
    .render { animation: appear 1.2s 3.3s backwards, leave linear both; animation-timeline: auto, --hero; animation-range: normal, contain 25% contain 50%; }
    .through { animation: arrive linear both; animation-timeline: --hero; animation-range: contain 86% contain 100%; }
  }
}

/* Sections */
.approach, .services, .projects, .process, .faq, .start { padding: var(--section) 0; }
.approach { padding-bottom: calc(var(--section) / 2); }
.statement { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; max-width: 16ch; margin-bottom: 36px; text-wrap: balance; }
.lede { max-width: 60ch; font-size: 20px; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows li { display: grid; grid-template-columns: 4fr 8fr; gap: 12px 48px; padding: 36px 0 0; }
.rows h3 { margin: 0; }
.rows p { color: var(--mute); max-width: 52ch; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 72px 48px; }
.cards figure { margin: 0 0 22px; background: var(--wash); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 8%; }
.cards .meta { font-size: 15px; color: var(--mute); margin: 0 0 10px; }
.cards p:last-child { max-width: 46ch; }

/* Process: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 32px; }
.steps p { color: var(--mute); font-size: 17px; }
.num { display: block; font-stretch: 75%; font-weight: 600; font-size: 40px; line-height: 1; color: var(--red); margin-bottom: 18px; }

/* FAQ */
.qa { max-width: 65ch; margin-top: 40px; }
.qa p { color: var(--mute); }

/* Start a project */
.start-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.intro { font-size: 20px; margin: -32px 0 40px; max-width: 46ch; }
.project-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: grid; gap: 8px; align-content: start; }
.field-full { grid-column: 1 / -1; }
label { font-weight: 600; font-size: 16px; }
input, select, textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 17px; color: var(--ink); background: var(--bg); border: 1px solid var(--mute); border-radius: 2px; }
textarea { min-height: 140px; resize: vertical; }
.help, .error { font-size: 15px; }
.help { color: var(--mute); }
.error { color: var(--red); }
.status { margin-top: 16px; font-weight: 600; }
.details { display: grid; gap: 6px; padding-top: 88px; }
.details a { display: inline-block; padding: 10px 0; }
.details .concept { margin-top: 18px; color: var(--mute); }

/* Project drawings (final state by default) */
.mini { width: 100%; height: 100%; }
.mini > path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .75; }
.m-wall { fill: var(--stone); } .m-brick { fill: var(--brick); } .m-new { fill: var(--newclad); } .m-glass { fill: url(#glassG); } .m-shade { fill: #000; fill-opacity: .13; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mini > path { stroke-dasharray: 1 1; animation: draw linear backwards; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .mini .fills { animation: appear linear backwards; animation-timeline: view(); animation-range: cover 40% cover 55%; }
  }
}

/* Footer */
footer.site { border-top: 1px solid var(--rule); padding: 40px 0 48px; font-size: 15px; color: var(--mute); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
.foot-brand { font-weight: 600; color: var(--ink); }
footer.site .concept { margin-left: auto; }
footer.site a { display: inline-block; padding: 12px 0; }

/* Process below 1100: number beside each step */
@media (max-width: 1099px) {
  .steps { grid-template-columns: 1fr; gap: 32px; max-width: 65ch; }
  .steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; }
  .steps .num { grid-row: span 2; margin: 0; }
}

/* Portrait tablets: stack, drawing first */
@media (max-width: 1024px) and (orientation: portrait) {
  .hero .grid { grid-template-columns: 1fr; align-content: start; gap: 28px; padding-top: 84px; }
  .sheet { order: -1; height: 52svh; min-height: 0; }
}

/* Phones */
@media (max-width: 760px) {
  nav, header.site .btn { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  header.site .wrap { height: 64px; }
  .hero .grid { grid-template-columns: 1fr; align-content: start; gap: 20px; padding-top: 68px; padding-bottom: 32px; }
  .sheet { order: -1; height: 44svh; min-height: 0; padding: 14px 14px 0; }
  .titleblock { margin-top: 10px; font-size: 12px; }
  .copy { padding: 0; }
  h1 { margin-bottom: 12px; font-size: 15px; }
  .display { font-size: 44px; margin-bottom: 16px; }
  .sub { margin-bottom: 24px; }
  .ln-con { display: none; }
  .ln-str { --b: 0s; --s: .6s; } .ln-arc { --b: .4s; --s: .8s; } .ln-tra { --b: .9s; --s: .8s; } .ln-orn { --b: 1.3s; --s: .6s; }
  .fill-wall, .render, .fill-glass, .fill-pane, .fill-door { animation-delay: 2s !important; }
  .facade .ln:not(.ln-con) { animation-delay: 2.3s !important; }
  footer.site .concept { margin-left: 0; width: 100%; }
  .rows li { grid-template-columns: 1fr; padding-top: 28px; }
  .cards { grid-template-columns: 1fr; gap: 56px; }
  .start-grid, .project-form { grid-template-columns: 1fr; }
  .start-grid { gap: 40px; }
  .details { padding-top: 0; }
  .intro { font-size: 18px; }
  .lede { font-size: 18px; }
}
@media (max-width: 760px) and (max-height: 760px) { .sheet { height: 34svh; } }

/* Print: a complete static page */
@media print {
  *, *::before, *::after { animation: none !important; }
  header.site nav, header.site .btn, .menu-btn, #menu, .skip, .through, form { display: none !important; }
  header.site { position: static; }
  .hero { height: auto !important; }
  .stage { position: static; height: auto; min-height: 0; overflow: visible; }
  .hero .grid { padding-top: 0; min-height: 0; }
  .sheet { height: 520px; break-inside: avoid; }
}