/* Invescore — Round 3, Night theme. Fonts: Signifier (Klim) + National 2 (Klim), self-hosted.
   Built from Dougal's Figma "Invescore Round 3" (98BDywiVDjJP3HTBP5ynXK).
   Desktop values are 1:1 with the 1440 × 1024 frames; mobile layout is derived. */

@font-face {
  font-family: "Signifier";
  src: url("/assets/fonts/signifier-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National 2";
  src: url("/assets/fonts/national-2-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #111110;
  --ink: #efede7;
  --brand: #f4f1e8;
  --muted: #a5a59f;
  --label: #a6a69e;
  --tag-ink: #ccccc4;
  --tag-bg: rgba(255, 255, 255, 0.05);
  --rule: #383835;
  --icon: #f0ede8;
  --serif: "Signifier", Georgia, "Times New Roman", serif;
  --sans: "National 2", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);      /* long expo ease, as on stallanbrand.com */
  --base: 0ms;

  /* Grid (desktop): brand | navigation | content */
  --rule-1: 20.5556%;                         /* x = 296 at 1440 */
  --rule-2: 41.1111%;                         /* x = 592 */
  --nav-x: calc(20.8333% + 16px);             /* x = 316 */
  --content-x: calc(41.6667% + 12px);         /* x = 612 */
  --gutter: 20px;
  --figure-bg: #1b1b19;
  --img-filter: grayscale(1) contrast(1.04) brightness(.9);
  color-scheme: dark;
}

/* Day — the same system in daylight: warm paper, near-black ink, soft greys */
:root[data-theme="day"] {
  --bg: #ffffff;                              /* same white as stallanbrand.com */
  --ink: #1a1a18;
  --brand: #111110;
  --muted: #7d7d77;
  --label: #85857e;
  --tag-ink: #3c3c38;
  --tag-bg: rgba(17, 17, 16, 0.05);
  --rule: #dad8d1;
  --icon: #1a1a18;
  --figure-bg: #e7e5df;
  --img-filter: grayscale(1) contrast(1.02);
  color-scheme: light;
}
/* Smooth cross-fade when the theme changes (class is only present during the switch) */
.theme-fade *, .theme-fade *::before, .theme-fade *::after, .theme-fade body {
  transition: color .9s var(--ease), background-color .9s var(--ease), border-color .9s var(--ease) !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
p, h1, h2, figure, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--bg); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 1px solid var(--muted); outline-offset: 4px; }

/* ---------- Brand, navigation, clock ---------- */

.logo {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;                            /* same size as the section titles (.row-title) */
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--brand);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.nav { display: flex; flex-direction: column; gap: 4px; }   /* Round 3: 24px rows, 4px apart */
.nav a, .tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
  transition: color .6s var(--ease);
}
/* 10px ring with a 1px stroke (Dougal's ellipse), drawn in CSS so it follows the theme */
.dot {
  flex: none;
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  transition: border-color .6s var(--ease);
}
.dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform .7s var(--ease);
}
.nav a:hover, .tab:hover, .nav a.is-active, .tab[aria-selected="true"] { color: var(--ink); }
.nav a:hover .dot, .tab:hover .dot,
.nav a.is-active .dot, .tab[aria-selected="true"] .dot { border-color: var(--ink); }
.nav a.is-active .dot::after, .tab[aria-selected="true"] .dot::after { transform: scale(1); }

.clock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.clock p { text-box: trim-both cap alphabetic; white-space: nowrap; }

/* ---------- Type ---------- */

.lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;                            /* same size as the section titles (.row-title) */
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.about-text p + p { margin-top: 20px; }

.text-link {
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .8s var(--ease);
}
.text-link:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- Photography: black & white, settled into the dark ---------- */

figure { background: var(--figure-bg); }
figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
}
.about-image img { object-position: center top; }   /* keep the Kingdom Centre arch in frame */

/* ---------- Rows (Services, Team, Contact) ---------- */

.row { position: relative; border-top: 1px solid transparent; }
.row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
}
.row-head {
  position: relative;
  display: flex;
  align-items: baseline;
  width: 100%;
  min-height: 63px;                 /* 64px pitch including the rule */
  padding: 22.6px 40px 0 0;         /* title cap-top sits 23.6px below the rule */
}
.row-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.row-meta {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  text-box: trim-both cap alphabetic;
}
.contact .row-meta { color: var(--ink); }
.contact a { transition: color .6s var(--ease); }
.contact a:hover { color: var(--muted); }

/* + / − : two 10px hairlines; the vertical one folds away when open */
.pm {
  position: absolute;
  right: 10px;
  top: 26px;
  width: 10px;
  height: 10px;
}
.pm::before, .pm::after {
  content: "";
  position: absolute;
  background: var(--icon);
  transition: transform .8s var(--ease), opacity .6s var(--ease);
}
.pm::before { left: 0; right: 0; top: 4.5px; height: 1px; }
.pm::after { top: 0; bottom: 0; left: 4.5px; width: 1px; }
.row.is-open .pm::after { transform: rotate(90deg) scaleY(0); }

.accordion .row-head { cursor: pointer; }
.accordion .row-head .row-title { transition: opacity .6s var(--ease); }
.accordion:hover .row:not(.is-open) .row-head:not(:hover) .row-title { opacity: .55; }

/* Expanding detail */
.row-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .9s var(--ease);
}
.row.is-open .row-panel { grid-template-rows: 1fr; }
.row-panel > .inner { overflow: hidden; min-height: 0; }
.row-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px 0 28px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .9s var(--ease);
}
.row.is-open .row-body { opacity: 1; transform: none; transition-delay: .15s; }
.row-body .copy { font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 600px; }
.row-body .copy p + p { margin-top: 12px; }
.tags-block { display: flex; flex-direction: column; gap: 16px; }
.tags-label { font-size: 16px; line-height: 1.4; color: var(--label); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 600px; }
.tag {
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--tag-bg);
  font-size: 16px;
  line-height: 22px;
  color: var(--tag-ink);
  white-space: nowrap;
}

/* Team member detail */
.person-body { flex-direction: row; align-items: flex-start; gap: 24px; }
.person-photo { flex: none; width: 240px; aspect-ratio: 6 / 7; }
.person-body .copy { max-width: 440px; }

.tabs { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }


/* =========================================================
   Desktop — 1:1 with the 1440 × 1024 Figma frames
   ========================================================= */
@media (min-width: 1100px) {

  .shell { position: relative; min-height: 100vh; }

  /* Column rules run the full height of the screen */
  .shell::before, .shell::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--rule);
    pointer-events: none;
    z-index: 1;
  }
  .shell::before { left: calc(var(--rule-1) - 0.5px); }
  .shell::after  { left: calc(var(--rule-2) - 0.5px); }

  .masthead { position: fixed; top: 20px; left: var(--gutter); z-index: 2; }
  .nav { position: fixed; top: 20px; left: var(--nav-x); z-index: 2; }
  .clock { position: fixed; left: var(--gutter); bottom: 24px; }

  .content { padding-bottom: 24px; }
  .page { margin-left: var(--content-x); margin-right: var(--gutter); padding-top: 20px; }

  /* About — text 600 wide; "Get in touch" at y = 274; image 440 × 567 bottom-right */
  /* Image keeps Dougal's 440 × 567 at 1440 × 1024, but never grows taller than the space
     under "Get in touch" (link bottom ≈ 250 + 46px gap), so short windows can't overlap */
  .shell[data-page="about"] { min-height: max(100vh, 704px); }
  .about-text { max-width: 600px; }
  .page-about .text-link { margin-top: 20px; }
  .about-image {
    position: absolute;
    right: var(--gutter);
    bottom: 24px;
    width: auto;
    height: clamp(360px, calc(100vh - 320px), calc((33.3333vw - 40px) * 567 / 440));
    aspect-ratio: 440 / 567;
  }

  /* Services / Team / Contact — first rule at y = 209 on every page */
  .intro { max-width: 537px; }
  .page-services .intro, .page-contact .intro { min-height: 189px; }
  .page-team .intro { min-height: 113px; }
  .page-team .people { margin-top: 24px; }   /* keeps the first rule at y = 209 */

  .people .row-title { flex: 0 0 50%; }
  .contact .row-title { flex: 0 0 50%; }
}


/* =========================================================
   Mobile & tablet — derived from the desktop system
   ========================================================= */
@media (max-width: 1099.98px) {

  .shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 var(--gutter);
    position: relative;
  }

  /* Header: logo | rule | nav. The rule runs from the very top, as on desktop */
  .masthead { position: relative; height: 136px; padding-top: 22px; }
  .logo { font-size: 19px; }                /* matches mobile section titles */
  .nav { position: absolute; top: 20px; left: max(58%, 210px); }
  .shell::before {
    content: "";
    position: absolute;
    top: 0;
    height: 136px;
    left: calc(max(58%, 210px) - 16px);
    width: 1px;
    background: var(--rule);
    transform-origin: top center;
  }

  .content { flex: 1; padding: 24px 0 0; }
  .lead { font-size: 19px; }                /* matches mobile section titles */

  /* Footer clock */
  .clock {
    order: 3;
    position: relative;
    margin-top: 56px;
    padding: 20px 0 calc(24px + env(safe-area-inset-bottom));
    gap: 9px;
  }

  /* About */
  .about-text { max-width: 560px; }
  .page-about .text-link { margin-top: 20px; }
  .about-image { width: 62%; max-width: 320px; margin: 48px 0 0 auto; aspect-ratio: 440 / 567; }

  .intro { max-width: 600px; margin-bottom: 28px; }
  .page-team .intro { margin-bottom: 24px; }
  .page-team .people { margin-top: 18px; }

  .row-head { flex-wrap: wrap; row-gap: 10px; min-height: 63px; padding: 22px 36px 22px 0; }
  .row-title { font-size: 19px; white-space: normal; }
  .people .row-title { flex: 1 0 100%; }
  .contact .row-title { flex: 0 0 36%; }
  .contact .row-meta { flex: 1; min-width: 0; }
  .pm { top: 26px; }
  .rows .row:last-child::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--rule);
    transform-origin: left center;
  }
  .rows .row:last-child { border-bottom: 1px solid transparent; }
  .row-body { padding: 0 0 24px; }
  .person-body { flex-direction: column; gap: 18px; }
  .person-photo { width: 60%; max-width: 240px; }
}

/* Browsers without text-box trimming: approximate the cap-height boxes */
@supports not (text-box: trim-both cap alphabetic) {
  .logo { line-height: 0.7; }
  .clock p { line-height: 13px; }
  .row-head { padding-top: 18px; }
}


/* =========================================================
   Motion — slow, expo-eased: rules draw first, then words
   ========================================================= */

@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

.page { animation: fade .9s var(--ease) both; }
.page.is-leaving { animation: page-out .3s ease both; }
@keyframes page-out { from { opacity: 1; } to { opacity: 0; } }

/* First visit: the frame draws before content arrives */
.shell.is-intro { --base: 500ms; }

.row::before, .rows .row:last-child::after {
  animation: draw-x 1.2s var(--ease) both;
  animation-delay: calc(var(--base) + 200ms + var(--i, 0) * 90ms);
}
.rows .row:last-child::after { animation-delay: calc(var(--base) + 290ms + var(--i, 0) * 90ms); }

.lead, .text-link { animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--base) + 40ms); }
.text-link { animation-delay: calc(var(--base) + 160ms); }
.tab { animation: rise 1s var(--ease) both; animation-delay: calc(var(--base) + 140ms); }
.tab + .tab { animation-delay: calc(var(--base) + 200ms); }
.row-head > * { animation: rise 1s var(--ease) both; animation-delay: calc(var(--base) + 320ms + var(--i, 0) * 90ms); }

.about-image { animation: wipe 1.6s var(--ease) both; animation-delay: calc(var(--base) + 300ms); overflow: hidden; }
.about-image img { animation: settle 2.4s var(--ease) both; animation-delay: calc(var(--base) + 300ms); }
.row.is-open .person-photo { animation: wipe 1.1s var(--ease) both; animation-delay: .12s; }

/* The frame itself, on first load only */
.shell::before, .shell::after { transform-origin: top center; animation: draw-y 1.6s var(--ease) both; }
.shell::after { animation-delay: 120ms; }
.logo { animation: rise 1.2s var(--ease) both; animation-delay: 80ms; }
.nav a { animation: rise 1s var(--ease) both; }
.nav a:nth-child(1) { animation-delay: 220ms; }
.nav a:nth-child(2) { animation-delay: 280ms; }
.nav a:nth-child(3) { animation-delay: 340ms; }
.nav a:nth-child(4) { animation-delay: 400ms; }
.clock { animation: fade 1.4s ease both; animation-delay: 600ms; }
@media (max-width: 1099.98px) {
  .masthead::after, .clock::before {
    content: "";
    position: absolute;
    left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
    height: 1px;
    background: var(--rule);
    transform-origin: left center;
    animation: draw-x 1.4s var(--ease) both;
  }
  .masthead::after { bottom: 0; animation-delay: 150ms; }
  .clock::before { top: 0; animation-delay: 500ms; }
}

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