/* =====================================================================
   Homepage design A · Kesit (cross-section)
   White canvas; the print → scan hero from E, then the showreel.
   ===================================================================== */
.hd-a {
  --a-ink: #202020;
  --a-shale: #4d4d4d;
  --a-ash: #6b6b6b;
  --a-pearl: #e8e8e8;
  --a-cloud: #f5f5f5;
  --a-mist: #efefef;
  --a-ivory: #ebe6dd;
  --a-orange: #ff682c;
  --a-gold: #816729;
  --a-display: Montserrat, "PolySans", system-ui, sans-serif;
  --a-body: Inter, system-ui, sans-serif;
  --a-header: 64px;
}
/* The global html+body overflow-x:hidden turns body into a non-scrolling scroll
   container and breaks position:sticky (same fix as body.project-form-page). */
body.hd-a { overflow-x: visible; }
.hd-a main { font-family: var(--a-body); color: var(--a-ink); }
.hd-a main :focus-visible { outline: 2px solid var(--a-orange); outline-offset: 3px; border-radius: 4px; }

.a-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.a-h2 {
  font-family: var(--a-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}
.a-h2-left { text-align: left; }
.a-sub { margin: 14px auto 0; max-width: 620px; font-size: 17px; line-height: 1.5; color: var(--a-ink); text-align: center; }
.a-sub-left { margin-left: 0; text-align: left; }
.a-head { margin-bottom: 56px; }
.a-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.a-textlink { font-size: 15px; font-weight: 500; color: var(--a-ink); text-decoration: none; border-bottom: 2px solid var(--a-ink); padding-bottom: 2px; white-space: nowrap; }
.a-textlink:hover { color: var(--a-orange); border-color: var(--a-orange); }

/* Buttons */
.a-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.a-actions-center { justify-content: center; }
.a-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--a-body);
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.a-btn-dark { background: var(--a-ink); color: #fff; }
.a-btn-dark:hover { background: #000; }
.a-btn-line { color: var(--a-ink); border-color: #d6d6d6; background: #fff; }
.a-btn-line:hover { border-color: var(--a-ink); }
.a-btn-light { background: #fff; color: var(--a-ink); }
.a-btn-light:hover { background: var(--a-cloud); }
.a-btn-ghost-light { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.28); }
.a-btn-ghost-light:hover { color: #fff; border-color: #fff; }

/* =====================================================================
   TOOLS — pick a tool, watch the recording (panel inside the showreel)
   ===================================================================== */
/* a summary panel of the showreel, right under the video */
.a-reel-tools { margin-top: 40px; }
.a-tools-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: center; }
.a-screen-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #1c1c1c; }
.a-screen-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 450ms ease; }
.a-screen-video.is-active { opacity: 1; }
.a-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.a-step {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px; padding: 16px 18px 16px 22px; position: relative;
  font: inherit; color: inherit; transition: background 200ms ease;
}
.a-step:hover { background: rgba(32,32,32,.04); }
.a-step.is-active { background: var(--a-mist); }
.a-step::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: transparent; transition: background 200ms ease; }
.a-step.is-active::before { background: var(--a-orange); }
.a-step-name { display: block; font: 600 19px/1.25 var(--a-display); letter-spacing: -0.015em; color: var(--a-shale); transition: color 200ms ease; }
.a-step-text { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--a-ink); }
.a-step.is-active .a-step-name, .a-step:hover .a-step-name { color: var(--a-ink); }

/* =====================================================================
   TRY IT — real demos, plus a compact field line
   ===================================================================== */
.a-try { padding: 80px 0; background: #fff; }
.a-try-list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.a-try-list a {
  display: flex; flex-direction: column; height: 100%; padding: 28px;
  background: #fff; border: 1px solid #e3e3e3; border-top: 3px solid var(--a-orange); border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.a-try-list a:hover, .a-try-list a:focus-visible {
  border-color: var(--a-orange); transform: translateY(-3px);
  box-shadow: 0 12px 28px -16px rgba(32,32,32,.35);
}
.a-try-go {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--a-body); color: var(--a-orange);
}
.a-try-go svg { width: 18px; height: 18px; transition: transform 160ms ease; }
.a-try-list a:hover .a-try-go svg { transform: translateX(4px); }
.a-try-name { display: block; font: 600 19px/1.25 var(--a-display); letter-spacing: -0.015em; }
.a-try-text { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--a-ink); }
.a-fieldline { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.a-fieldline span { color: var(--a-ash); }
.a-fieldline a { color: var(--a-ink); text-decoration: none; border-bottom: 1px solid #cfcfcf; }
.a-fieldline a:hover { color: var(--a-orange); border-color: var(--a-orange); }

/* =====================================================================
   SHOWREEL
   ===================================================================== */
.a-reel { padding: 80px 0; background: var(--a-cloud); }
.a-reel-frame { position: relative; margin-top: 40px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #ebebeb; }
.a-reel-poster, .a-reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-reel-video[hidden] { display: none; }
.a-reel-frame.is-playing .a-reel-poster { display: none; }
.a-reel-play {
  position: absolute; left: 24px; bottom: 24px;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 20px 8px 8px; border: 0; border-radius: 200px;
  background: var(--a-ink); color: #fff; font: 500 16px/1 var(--a-body); cursor: pointer;
}
.a-reel-play:focus-visible { outline: 3px solid var(--a-orange); outline-offset: 3px; }
.a-reel-play-icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 200px; background: var(--a-orange); color: #fff; transition: transform 160ms ease;
}
.a-reel-play:hover .a-reel-play-icon { transform: scale(1.06); }
.a-reel-play-icon svg { width: 22px; height: 22px; margin-left: 3px; }
.a-reel-time { color: rgba(255,255,255,.6); font-weight: 400; margin-left: 4px; }

/* =====================================================================
   INSTITUTIONS
   ===================================================================== */
.a-inst { padding: 80px 0; background: var(--a-mist); }
.a-inst-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.a-inst-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.a-inst-list li { padding: 24px; background: #fff; border-radius: 8px; }
.a-inst-list h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--a-display); letter-spacing: -0.015em; }
.a-inst-list p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--a-ink); }

/* =====================================================================
   GUIDES
   ===================================================================== */
.a-guides { padding: 80px 0; background: #fff; }
.a-guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.a-guide-list a { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.a-guide-cover { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--a-cloud); }
.a-guide-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
.a-guide-list a:hover img { transform: scale(1.03); }
.a-guide-title { margin-top: 16px; font: 600 17px/1.3 var(--a-body); }
.a-guide-list a:hover .a-guide-title { text-decoration: underline; text-underline-offset: 3px; }
.a-guide-desc { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--a-shale); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =====================================================================
   CTA
   ===================================================================== */
.a-cta { background: var(--a-ink); color: #fff; padding: 96px 0; }
.a-cta-inner { text-align: center; }
.a-cta-title {
  font-family: var(--a-display); font-weight: 600;
  font-size: clamp(40px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.04em;
  margin: 0 auto; max-width: 900px; text-wrap: balance;
}
.a-cta-sub { margin: 20px auto 0; max-width: 560px; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.72); }
.a-actions-center { margin-top: 32px; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1023px) {
  .a-wrap { padding: 0 24px; }

  .a-reel-tools { margin-top: 28px; }
  .a-tools-grid { grid-template-columns: 1fr; gap: 20px; }

  .a-try { padding: 72px 0; }
  .a-try-list { grid-template-columns: 1fr; gap: 12px; }

  .a-reel { padding: 64px 0; }
  .a-reel-frame { margin-top: 28px; }

  .a-inst { padding: 80px 0; }
  .a-inst-grid { grid-template-columns: 1fr; gap: 36px; }

  .a-guides { padding: 88px 0 72px; }
  .a-guide-list { grid-template-columns: 1fr; gap: 36px; }
  .a-head { margin-bottom: 32px; }
  .a-h2, .a-sub { text-align: left; margin-left: 0; }
}

@media (max-width: 600px) {
  .a-head-split { flex-direction: column; align-items: flex-start; }
  .a-inst-list { grid-template-columns: 1fr; }
  .a-btn { padding: 13px 18px; }
  .a-cta { padding: 80px 0 80px; }
  /* keep the play control off the poster's own words */
  .a-reel-play { left: auto; bottom: auto; right: 10px; top: 10px; padding: 0; background: transparent; }
  .a-reel-play > span:not(.a-reel-play-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .a-reel-play-icon { width: 44px; height: 44px; }
  .a-reel-play-icon svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .a-screen-video, .a-guide-cover img { transition: none !important; }
}


/* Surfaces list borrowed from design E: align it with A's own column */
.hd-a .e-surfaces .e-wrap { max-width: 1240px; }
@media (max-width: 1023px) { .hd-a .e-surfaces .e-wrap { padding: 0 24px; } }