/* Askari Systems, company site. Brand Identity Guidelines v1.0, September 2026.
   Colours: section 05. Type: section 06. Grid: section 21. Motion: section 08.
   Five colours and nothing else. Brass is trim. Rules divide cells, never shadows. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --green: #1F4D3A;
  --brass: #C69A4B;
  --ink: #1B2A22;
  --parchment: #F4EFE3;
  --paper: #FBF8F0;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 72px;
  --gutter: 24px;
  --measure: 1200px;
  --control: 44px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: "Archivo", "Arial Nova", Arial, sans-serif;
  font-stretch: 100%;
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
em { font-style: italic; }
strong { font-weight: 700; }

/* Type scale, section 06 */
.display  { font-weight: 700; font-stretch: 112%; font-size: 56px; line-height: 52px; color: var(--green); letter-spacing: -0.01em; }
.headline { font-weight: 700; font-stretch: 105%; font-size: 32px; line-height: 36px; color: var(--green); }
.subhead  { font-weight: 500; font-stretch: 100%; font-size: 20px; line-height: 28px; }
.label    { font-weight: 700; font-stretch: 100%; font-size: 12px; line-height: 14px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--brass); }
.legal    { font-style: italic; font-weight: 400; }
.num      { font-variant-numeric: tabular-nums; }

/* Focus: 2px brass ring offset 2px, the only ring. */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Layout */
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s3); }
.rule-ink { border-top: 2px solid var(--ink); }
.rule-brass { border-top: 1px solid var(--brass); }

/* Masthead */
.masthead { background: var(--paper); border-bottom: 2px solid var(--ink); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 80px; }
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup .chevron { width: 30px; height: 13px; display: block; }
.lockup .word { font-weight: 700; font-stretch: 112%; font-size: 28px; line-height: 28px; color: var(--green); }
.lockup .descriptor { display: block; font-weight: 700; font-size: 10px; line-height: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--brass); margin-top: 1px; }
.nav { display: flex; align-items: center; gap: var(--s4); }
.nav a:not(.btn) { text-decoration: none; font-weight: 500; font-size: 16px; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }

/* Buttons: 44px, square corners. Primary green, secondary outlined. Hover darkens 8%. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control); padding: 0 var(--s3);
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none;
  border: 2px solid var(--green); background: var(--green); color: var(--parchment);
  cursor: pointer;
}
.btn:hover { filter: brightness(0.92); }
.btn--secondary { background: transparent; color: var(--green); }
.btn--secondary:hover { filter: none; background: var(--paper); }

/* Hero: 7/5 house split */
.hero { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 2px solid var(--ink); }
.hero__copy { padding: var(--s6) var(--s3) var(--s6) 0; display: flex; flex-direction: column; gap: var(--s3); }
.hero__copy .display { max-width: 15ch; }
.hero__copy .subhead { max-width: 48ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.panel { background: var(--green); color: var(--parchment); padding: var(--s2); }
.panel__frame { border: 1px solid var(--brass); height: 100%; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.panel .label { color: var(--brass); }
.register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--brass); }
.register li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--brass); }
.register .name { font-weight: 700; font-stretch: 105%; font-size: 24px; line-height: 28px; color: var(--parchment); }
.register .detail { opacity: 0.8; }
.panel__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); }
.panel__foot .chevron { width: 72px; height: 31px; }

/* Sections */
.section { padding: var(--s6) 0; border-bottom: 2px solid var(--ink); }
.section__head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.section__head .label::after { content: ""; display: inline-block; width: 48px; border-top: 1px solid var(--brass); vertical-align: middle; margin-left: var(--s2); }
.section .headline { max-width: 24ch; margin-bottom: var(--s4); }

/* Cells divided by rules, never cards */
.cells { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); border-left: 1px solid var(--brass); }
.cell { padding: var(--s3); border-right: 1px solid var(--brass); border-bottom: 1px solid var(--brass); display: flex; flex-direction: column; gap: var(--s2); background: var(--paper); }
.cell h3 { font-weight: 700; font-stretch: 105%; font-size: 20px; line-height: 24px; color: var(--green); }
.cell .label { margin-bottom: var(--s1); }

.split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); }
.split .body { max-width: 60ch; display: flex; flex-direction: column; gap: var(--s2); }
.facts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.facts li { padding: var(--s2) 0; border-bottom: 1px solid var(--brass); display: grid; grid-template-columns: 1fr; gap: 2px; }
.facts .k { font-weight: 700; color: var(--green); }

.contact .email { font-weight: 700; font-stretch: 105%; font-size: 24px; line-height: 28px; color: var(--green); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; }

/* Footer */
.footer { background: var(--paper); padding: var(--s5) 0; }
.footer .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); }
.footer .legal { font-size: 18px; line-height: 24px; color: var(--green); display: inline-flex; align-items: center; gap: 10px; }
.footer .legal .chevron { width: 26px; height: 11px; }
.footer .small { font-size: 13px; line-height: 20px; margin-top: var(--s2); }
.footer .signoff { font-style: italic; }
.footer .right { text-align: right; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s2); }
.footer .rule-brass { margin-bottom: var(--s3); }

/* Motion, section 08: rises, never bounces. Each item 600ms on one ease-out curve, delays
   set per element in --d, the whole hero done inside 1.2s. reveal.js marks the document before
   first paint and starts the sequence once the typeface is in. Under reduced motion the script
   does nothing, so the static end frame is what loads. */
:root { --ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes track { from { opacity: 0; letter-spacing: 0; } to { opacity: 1; letter-spacing: 0.34em; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.reveal [data-rise] { opacity: 0; }
html.reveal [data-track] { opacity: 0; }
html.reveal-go [data-rise] { animation: rise 600ms var(--ease) var(--d, 0ms) both; }
html.reveal-go [data-track] { animation: track 600ms ease-out var(--d, 0ms) both; }
.register li { position: relative; border-bottom: 0; }
.register li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--brass); transform-origin: left; }
html.reveal [data-rule]::after { transform: scaleX(0); }
html.reveal-go [data-rule]::after { animation: draw 600ms var(--ease) calc(var(--d, 0ms) + 120ms) both; }
/* The order, in the stylesheet because the CSP allows no inline style. */
.lockup .chevron { --d: 0ms; }
.lockup .word { --d: 150ms; }
.lockup .descriptor { --d: 300ms; }
.hero__copy .label { --d: 100ms; }
.hero__copy .display { --d: 200ms; }
.hero__copy .subhead { --d: 350ms; }
.hero__copy .actions { --d: 450ms; }
.panel .label { --d: 300ms; }
.register li:nth-child(1) { --d: 420ms; }
.register li:nth-child(2) { --d: 480ms; }
.register li:nth-child(3) { --d: 540ms; }
.register li:nth-child(4) { --d: 600ms; }
.panel__foot .label { --d: 700ms; }
.panel__foot .chevron { --d: 800ms; }

/* Scale */
@media (max-width: 900px) {
  .cells { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .hero__copy { padding: var(--s5) 0; }
  .panel { margin: 0 calc(-1 * var(--s3)); }
  .nav a:not(.btn) { display: none; }
}
@media (max-width: 640px) {
  .display { font-size: 40px; line-height: 40px; }
  .headline { font-size: 26px; line-height: 30px; }
  .cells { grid-template-columns: 1fr; }
  .split, .footer .wrap { grid-template-columns: 1fr; }
  .footer .right { text-align: left; }
  .section { padding: var(--s5) 0; }
  .actions .btn { width: 100%; }
  .nav .btn { font-size: 14px; padding: 0 var(--s2); white-space: nowrap; }
  .masthead .wrap { gap: var(--s2); }
}

/* 404 */
.notfound { min-height: 100vh; display: grid; place-items: center; background: var(--green); color: var(--parchment); padding: var(--s3); }
.notfound .box { border: 1px solid var(--brass); padding: var(--s5); max-width: 520px; display: flex; flex-direction: column; gap: var(--s2); }
.notfound h1 { font-weight: 700; font-stretch: 105%; font-size: 32px; line-height: 36px; color: var(--parchment); }
.notfound a { color: var(--parchment); text-decoration-color: var(--brass); text-underline-offset: 4px; }