/* INSPIRE — trustinspire.com

   Visual system
   - Two grounds: the logo's warm charcoal (#231f20) for photography (gateway, projects), warm paper for reading (about, contact).
   - Typefaces match inspire-av.com: Cormorant Garamond for headings, Inter for text.
     IBM Plex Mono only for drawing-style annotations: indices, schedules.
   - Brass is used for lines and connection nodes only, never for fills or text blocks.
   - Graphics borrow from technical drawings: hairline rules, nodes, crop marks, dimension lines, title blocks.

   Motion (all disabled under prefers-reduced-motion)
   - Load: headline lines rise from a mask; the brass rule draws across the three services and its nodes appear.
     The services themselves are never hidden or delayed.
   - Hover/focus (desktop): the chosen panel widens, its photo eases in, the others dim, the arrow rule extends.
   - Scroll: photos are revealed with a clip wipe, a few drift with light parallax,
     and a brass path down the projects fills with scroll and lights each project's node.
*/

:root {
  --ink: #231f20;
  --ink-2: #2c2829;
  --paper: #f1eee8;
  --text: #141414;
  --text-2: #4a4843;
  --muted: #7d796f;
  --line: #d5d0c6;
  --line-dark: rgba(241, 238, 232, .16);
  --on-dark: #f1eee8;
  --on-dark-2: rgba(241, 238, 232, .68);
  --brass: #b8976a;

  --font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1360px;
  --gutter: clamp(16px, 4vw, 56px);
  --header-h: 80px;
  --ease: cubic-bezier(.22, .61, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; background: var(--paper); color: var(--text);
}
.skip-link:focus { top: 12px; }

/* Arrow drawn as a rule with a head; it extends on hover */
.rule-arrow {
  position: relative;
  display: inline-block;
  width: 28px; height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: currentColor;
  transition: width .5s var(--ease-out);
}
.rule-arrow::after {
  content: "";
  position: absolute; right: 0; top: -3.5px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line-dark); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}

/* Logo: vector trace of the supplied artwork, white on a transparent ground */
.wordmark { display: block; }
.wordmark img { width: auto; height: 40px; }

.nav { display: flex; gap: clamp(18px, 2.6vw, 40px); }
.nav a { font-size: .9375rem; color: var(--on-dark-2); transition: color .25s; }
.nav a:hover { color: var(--on-dark); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Burger menu: phones only, and only once main.js is running to open it */
.menu-toggle { display: none; }
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease-out), background-color .2s;
}
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -7px; }
.menu-icon::after { top: 7px; }
.site-header.is-open .menu-icon { background-color: transparent; }
.site-header.is-open .menu-icon::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .menu-icon::after { transform: translateY(-7px) rotate(-45deg); }

/* 1. Gateway ------------------------------------------------------------- */

.gateway {
  background: var(--ink);
  color: var(--on-dark);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.gateway-head {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 4fr);
  gap: 16px clamp(32px, 5vw, 80px);
  align-items: end;
  padding-top: clamp(20px, 4vh, 48px);
  padding-bottom: clamp(24px, 4vh, 40px);
}

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.01em;
}
h1 .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
h1 .line > span { display: block; }

.gateway-intro {
  color: var(--on-dark-2);
  font-size: 1.0625rem;
  max-width: 30em;
}

/* The brass rule that connects the three services */
.panels-rule { position: relative; height: 1px; margin-bottom: -1px; z-index: 2; }
.panels-rule svg { position: absolute; inset: -1px 0; width: 100%; height: 3px; overflow: visible; }
.panels-rule path { fill: none; stroke: var(--brass); stroke-width: 1; vector-effect: non-scaling-stroke; }

.panels {
  display: flex;
  gap: 6px;
  height: clamp(400px, calc(100svh - var(--header-h) - 230px), 680px);
}
.panels > li { flex: 1 1 0; min-width: 0; display: flex; transition: flex-grow .8s var(--ease); }

.panel {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  color: var(--on-dark);
  isolation: isolate;
}

.panel-media { position: absolute; inset: 0; z-index: -2; background: var(--ink-2); }
.panel-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out), filter .8s var(--ease), opacity 1.6s var(--ease);
}
.panel-media .slide { opacity: 0; }
.panel-media .slide.is-active { opacity: 1; }

/* Legibility scrim: low and neutral, not a coloured gradient */
.panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(35, 31, 32, .88) 0%, rgba(35, 31, 32, .38) 42%, rgba(35, 31, 32, 0) 70%);
}

/* Crop marks, as on a drawing sheet */
.marks { position: absolute; inset: 14px; pointer-events: none; transition: inset .6s var(--ease-out); }
.marks::before, .marks::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(241, 238, 232, .55);
  border-style: solid;
}
.marks::before { right: 0; top: 0; border-width: 1px 1px 0 0; }
.marks::after { left: 0; bottom: 0; border-width: 0 0 1px 1px; }

.node {
  position: absolute; left: 0; top: -4px; z-index: 3;
  width: 9px; height: 9px;
  border: 1px solid var(--brass);
  background: var(--ink);
  border-radius: 50%;
}

.panel-body {
  align-self: flex-end;
  display: grid;
  gap: 8px;
  width: 100%;
  padding: clamp(20px, 2.4vw, 36px);
}

.panel-index { font-family: var(--mono); font-size: .75rem; color: var(--brass); letter-spacing: .04em; }

.panel-name {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.7vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0;
}
.tag {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .75rem;
  letter-spacing: 0;
  color: var(--on-dark-2);
  border: 1px solid var(--line-dark);
  padding: 2px 7px;
}

.panel-line {
  color: var(--on-dark-2);
  max-width: 26em;
  transition: color .5s var(--ease), transform .7s var(--ease-out);
}

.panel-link {
  display: flex; align-items: center;
  margin-top: 6px;
  font-weight: 500;
  font-size: .9375rem;
}

/* Hover / focus: widen the chosen panel, dim the others */
@media (hover: hover) and (min-width: 861px) {
  .panels:hover > li:hover,
  .panels:focus-within > li:focus-within { flex-grow: 1.45; }
  .panels:hover > li:not(:hover) .panel-media img { filter: brightness(.55) saturate(.8); }
  .panel:hover .panel-media img,
  .panel:focus-visible .panel-media img { transform: scale(1.045); }
  .panel:hover .marks,
  .panel:focus-visible .marks { inset: 22px; }
  .panel:hover .panel-line,
  .panel:focus-visible .panel-line { color: var(--on-dark); transform: translateY(-3px); }
}
.panel:hover .rule-arrow,
.panel:focus-visible .rule-arrow,
.text-link:hover .rule-arrow,
.contact-list a:hover .rule-arrow,
.contact-list a:focus-visible .rule-arrow { width: 52px; }
.panel:focus-visible { outline-offset: -2px; }

/* 2. About --------------------------------------------------------------- */

.about {
  background: var(--paper);
  padding-block: clamp(72px, 10vw, 140px);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px clamp(40px, 7vw, 112px);
  align-items: start;
}

.statement {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.005em;
  max-width: 20ch;
}

.about-text { margin-top: clamp(28px, 3vw, 40px); max-width: 36em; }
.about-text p { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); }
.about-text p + p { margin-top: 1em; }

/* Title block, as in the corner of a drawing */
.title-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(36px, 4vw, 56px);
  border: 1px solid var(--text);
  max-width: 560px;
}
.title-block > div { padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.title-block > div:nth-child(2n) { border-right: 0; }
.title-block > div:nth-last-child(-n+2) { border-bottom: 0; }
.title-block dt { font-family: var(--mono); font-size: .6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.title-block dd { font-weight: 500; margin-top: 2px; }

/* Layered before/after photographs */
.layers { position: relative; padding-bottom: 72px; }
.layer { overflow: hidden; }
.layer img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; }
.layer--back { width: 82%; aspect-ratio: 4 / 3; }
.layer--back img { filter: grayscale(.25); }
.layer--front {
  position: relative;
  width: 70%;
  aspect-ratio: 4 / 3;
  margin: -34% 0 0 auto;
  outline: 10px solid var(--paper);
}
.layers figcaption {
  display: flex; align-items: center; gap: 14px;
  margin-top: 20px;
  font-size: .875rem;
  color: var(--text-2);
}

/* Dimension line: |-----| */
.dim {
  position: relative;
  flex: 0 0 56px; height: 1px;
  background: var(--brass);
}
.dim::before, .dim::after {
  content: ""; position: absolute; top: -4px;
  width: 1px; height: 9px; background: var(--brass);
}
.dim::before { left: 0; }
.dim::after { right: 0; }

/* 3. Projects ------------------------------------------------------------ */

.projects {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(72px, 10vw, 140px);
}

.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.005em;
}

.projects-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px 48px; flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-dark);
}
.projects-head p { color: var(--on-dark-2); max-width: 30em; }

.project-list { position: relative; padding-left: 48px; }

/* Brass connection path, filled as the visitor scrolls */
.path {
  position: absolute; left: 4px; top: 0; bottom: 0;
  width: 1px;
  background: var(--line-dark);
}
.path-fill {
  position: absolute; inset: 0;
  background: var(--brass);
  transform-origin: top;
  transform: scaleY(var(--progress, 1));
}
.path-node {
  position: absolute; left: -48px; top: clamp(56px, 7vw, 96px);
  width: 9px; height: 9px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: var(--ink);
  transition: background .5s var(--ease);
}
.project.is-reached .path-node { background: var(--brass); }

.project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line-dark);
}
.project--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.project--flip .project-media { order: 2; }

.project-media { position: relative; }
.frame { overflow: hidden; background: var(--ink-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--main { aspect-ratio: 3 / 2; }
.frame--main img, .frame--tall img { height: 112%; margin-top: -6%; }
.frame--tall { aspect-ratio: 4 / 5; width: 72%; }
.frame--detail {
  position: absolute;
  right: -24px; bottom: -40px;
  width: 30%;
  aspect-ratio: 3 / 4;
  outline: 8px solid var(--ink);
}
.project--flip .frame--detail { right: auto; left: -24px; }
.frame--plan { aspect-ratio: 3 / 2; width: 38%; background: #fff; }
.frame--plan img { object-fit: contain; }
.frame--soon img { height: 100%; margin-top: 0; }

.project-kind { font-family: var(--mono); font-size: .75rem; color: var(--brass); letter-spacing: .04em; }
.project h3 {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.08;
  letter-spacing: 0;
}
.project-info > p:not(.project-kind) { margin-top: 14px; color: var(--on-dark-2); max-width: 30em; }

/* Specification schedule */
.schedule { margin-top: 24px; border-top: 1px solid var(--line-dark); }
.schedule > div {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 12px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line-dark);
  font-size: .9375rem;
}
.schedule dt { font-family: var(--mono); font-size: .75rem; color: var(--on-dark-2); padding-top: 2px; }

.text-link {
  display: inline-flex; align-items: center;
  margin-top: 24px;
  font-weight: 500;
}

/* 4. Contact ------------------------------------------------------------- */

.site-footer {
  background: var(--paper);
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: 28px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: 32px clamp(32px, 5vw, 72px);
}
.contact-text { color: var(--text-2); margin-bottom: 20px; }

.contact-list { border-top: 1px solid var(--text); }
.contact-list a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}
.c-name { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: 0; }
.c-url { font-family: var(--mono); font-size: .8125rem; color: var(--text-2); }

.studio { color: var(--text-2); line-height: 1.7; }

.footer-base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted);
}
.wordmark--small { width: auto; height: 22px; filter: brightness(0); opacity: .85; }

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Load sequence */
  .js h1 .line > span { animation: rise 1.1s var(--ease-out) both; }
  .js h1 .line:nth-child(2) > span { animation-delay: .12s; }
  @media (max-width: 860px) {
    .js h1 .line > span { animation: fade 1s var(--ease) both; }
  }
  .js .gateway-intro { animation: fade 1s var(--ease) .35s both; }
  .js .panels-rule path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) .3s forwards; }
  .js .node { animation: pop .5s var(--ease-out) both; }
  .js .panels > li:nth-child(1) .node { animation-delay: .35s; }
  .js .panels > li:nth-child(2) .node { animation-delay: .85s; }
  .js .panels > li:nth-child(3) .node { animation-delay: 1.35s; }
  .js .panel-media .slide.is-active { animation: settle 2.4s var(--ease-out) both; }

  /* Scroll reveals (classes set by main.js) */
  .js [data-reveal]:not([data-reveal="clip"]) { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease-out); }
  .js [data-reveal="clip"] { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  .js .project-media [data-reveal="clip"] + [data-reveal="clip"] { transition-delay: .25s; }
}

@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); } to { transform: none; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .studio { grid-column: 2; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .wordmark img { height: 32px; }
  .nav { gap: 18px; }
  .nav a { font-size: .875rem; }

  .js .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-right: -10px;
    padding: 0; border: 0;
    background: none;
    color: var(--on-dark);
    cursor: pointer;
  }
  .js .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
  }
  .js .site-header.is-open { border-bottom-color: var(--line-dark); }
  .js .site-header.is-open .site-nav { display: block; }
  .js .nav { flex-direction: column; gap: 0; padding: 4px var(--gutter) 20px; }
  .js .nav a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--serif);
    font-size: 1.625rem;
    color: var(--on-dark);
  }

  .gateway-head { grid-template-columns: 1fr; gap: 12px; padding-top: 18px; padding-bottom: 20px; }
  /* Phones: smaller heading, and the two lines flow as one balanced paragraph so no word is stranded */
  h1 { font-size: clamp(2rem, 8.4vw, 2.5rem); line-height: 1.08; text-wrap: balance; }
  h1 .line, h1 .line > span { display: inline; }
  h1 .line + .line::before { content: " "; }
  .gateway-intro { font-size: .9375rem; }

  /* Services stack as three photographic rows: always-visible names and arrows, no hover needed */
  .panels { flex-direction: column; height: auto; gap: 6px; }
  .panels > li { flex: none; }
  .panel { min-height: clamp(132px, 19svh, 190px); }
  .panel::before { background: linear-gradient(to right, rgba(35,31,32,.84) 0%, rgba(35,31,32,.47) 60%, rgba(35,31,32,.15) 100%); }
  .panel-body { align-self: center; gap: 4px; padding: 16px 18px; }
  .panel-index { display: none; }
  .panel-name { font-size: 1.75rem; gap: 8px; }
  .panel-line { display: none; }
  .panel-link { margin-top: 2px; font-size: .875rem; color: var(--on-dark-2); }
  .marks { inset: 10px; }
  .marks::after { display: none; }
  .node { display: none; }
  .panels-rule { display: none; }

  .about-grid, .project, .project--flip { grid-template-columns: 1fr; }
  .project--flip .project-media { order: 0; }
  .layers { padding-bottom: 0; }

  .project-list { padding-left: 0; }
  .path, .path-node { display: none; }
  .frame--detail { right: -6px; bottom: -28px; width: 32%; outline-width: 6px; }
  .project--flip .frame--detail { left: auto; right: -6px; }
  .frame--plan { width: 44%; }
  .frame--tall { width: 82%; }
  .project { padding-block: 48px 56px; }
  .project-info { margin-top: 24px; }

  .contact-grid { grid-template-columns: 1fr; }
  .studio { grid-column: auto; }
}

@media (max-width: 420px) {
  .schedule > div { grid-template-columns: 8em 1fr; }
  .c-url { display: none; }
  .title-block { grid-template-columns: 1fr; }
  .title-block > div { border-right: 0; }
  .title-block > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}