/* DDITA additions: built on the site's own colour variables (see site.css :root). */

/* ---------- elements toggled by the script must really disappear when hidden */
.dd-lb[hidden], .dd-lb button[hidden], .dd-mnav[hidden], .dd-pop[hidden] { display: none !important; }

/* ---------- scroll-in animation (content stays visible if scripts don't run) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- mobile menu */
.dd-mnav { display: flex; flex-direction: column; gap: 2px; padding: .5rem 1rem 1rem; border-top: 1px solid hsl(var(--primary) / .25); background: hsl(var(--secondary)); max-height: calc(100vh - 4rem); overflow-y: auto; }
.dd-mnav a { padding: .8rem .6rem; border-radius: .4rem; color: hsl(var(--secondary-foreground) / .8); font-size: .95rem; font-weight: 500; }
.dd-mnav a:hover, .dd-mnav a:focus-visible { background: hsl(var(--primary) / .14); color: hsl(var(--secondary-foreground)); }
.dd-mnav a[aria-current="page"] { color: hsl(var(--primary)); }
.dd-mnav a.dd-mnav-cta { margin-top: .5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); text-align: center; font-weight: 600; }
.dd-mnav a.dd-mnav-cta:hover { background: hsl(var(--accent)); }
@media (min-width: 1024px) { .dd-mnav { display: none !important; } }
.dd-noscroll { overflow: hidden; }

/* ---------- photos: hover zoom, caption, click to enlarge */
.dd-photo { position: relative; overflow: hidden; }
.dd-photo img { cursor: zoom-in; transition: transform .6s ease; }
.dd-photo:hover img, .dd-photo img:focus-visible { transform: scale(1.045); }
.dd-photo img:focus-visible { outline: 3px solid hsl(var(--primary)); outline-offset: -3px; }
.dd-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.1rem .9rem; color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.35;
  background: linear-gradient(hsl(var(--secondary) / 0), hsl(var(--secondary) / .9)); transform: translateY(100%); transition: transform .35s ease; pointer-events: none; }
.dd-photo:hover .dd-photo-cap, .dd-photo:focus-within .dd-photo-cap { transform: none; }
.dd-zoom-hint { position: absolute; top: .75rem; right: .75rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: hsl(var(--secondary) / .72); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.dd-photo:hover .dd-zoom-hint, .dd-photo:focus-within .dd-zoom-hint { opacity: 1; }
@media (hover: none) { .dd-photo-cap { transform: none; } .dd-zoom-hint { opacity: 1; } }

/* ---------- diagram sections */
.dd-sec { padding-block: 5rem; background: hsl(var(--background)); }
.dd-sec--muted { background: hsl(var(--muted)); }
.dd-wrap { max-width: 80rem; margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 640px) { .dd-wrap { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .dd-wrap { padding-inline: 2rem; } }
.dd-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 1rem; }
.dd-h2 { font-family: var(--font-heading); font-size: 1.875rem; line-height: 1.2; font-weight: 800; color: hsl(var(--foreground)); margin-bottom: .75rem; text-wrap: balance; }
@media (min-width: 640px) { .dd-h2 { font-size: 2.25rem; } }
.dd-lead { color: hsl(var(--muted-foreground)); max-width: 42rem; line-height: 1.65; margin-bottom: 2.5rem; }

/* ---------- interactive diagram */
.dd-ii { margin: 0; }
.dd-ii-frame { position: relative; }
.dd-ii-media { position: relative; overflow: hidden; border-radius: 1rem; box-shadow: 0 10px 30px hsl(var(--secondary) / .18); transition: box-shadow .35s ease; }
.dd-ii-frame:hover .dd-ii-media { box-shadow: 0 22px 48px hsl(var(--secondary) / .3); }
.dd-ii-media img { display: block; width: 100%; height: auto; cursor: zoom-in; transition: transform .6s ease; }
.dd-ii-frame:hover .dd-ii-media img { transform: scale(1.02); }
.dd-ii-media img:focus-visible { outline: 3px solid hsl(var(--primary)); outline-offset: -3px; }
.dd-ii-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.1rem .9rem; color: #fff; font-weight: 600; font-size: .95rem;
  background: linear-gradient(hsl(var(--secondary) / 0), hsl(var(--secondary) / .92)); transform: translateY(100%); transition: transform .35s ease; pointer-events: none; }
.dd-ii-frame:hover .dd-ii-cap, .dd-ii-frame:focus-within .dd-ii-cap { transform: none; }
.dd-ii-help { margin-top: .9rem; font-size: .85rem; color: hsl(var(--muted-foreground)); display: flex; align-items: center; gap: .5rem; }
.dd-ii-help::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: hsl(var(--warning)); box-shadow: 0 0 0 3px hsl(var(--warning) / .25); flex: none; }
@media (hover: none) { .dd-ii-cap { display: none; } }

.dd-dot { position: absolute; z-index: 2; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; padding: 0; border-radius: 50%; border: 2px solid #fff;
  background: hsl(var(--warning)); color: hsl(var(--secondary)); font: 800 .85rem/1 var(--font-sans); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 0 0 0 hsl(var(--warning) / .6); animation: dd-pulse 2.2s infinite; }
.dd-dot:hover { transform: scale(1.12); }
.dd-dot[aria-expanded="true"] { background: #fff; animation: none; }
.dd-dot:focus-visible { outline: 3px solid hsl(var(--primary)); outline-offset: 2px; }
@keyframes dd-pulse { 70% { box-shadow: 0 0 0 .8rem hsl(var(--warning) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--warning) / 0); } }
@media (max-width: 640px) { .dd-dot { width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; font-size: .75rem; } }

.dd-pop { position: absolute; z-index: 3; width: min(19rem, 78vw); padding: .9rem 1rem; border-radius: .6rem; background: hsl(var(--background));
  color: hsl(var(--foreground)); box-shadow: 0 16px 40px hsl(var(--secondary) / .35); border: 1px solid hsl(var(--border)); font-size: .9rem; line-height: 1.5; text-align: left; }
.dd-pop strong { display: block; font-size: 1rem; margin-bottom: .3rem; font-family: var(--font-heading); }
.dd-pop p { margin: 0; color: hsl(var(--muted-foreground)); }
.dd-pop a { display: inline-block; margin-top: .6rem; color: hsl(var(--primary)); font-weight: 600; }
.dd-pop a:hover { text-decoration: underline; }

/* ---------- lightbox */
.dd-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 4rem 4.5rem; background: hsl(var(--navy-deep) / .95); }
.dd-lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 100%; }
.dd-lb img { max-width: 100%; max-height: 78vh; border-radius: .5rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.dd-lb figcaption { color: hsl(var(--secondary-foreground) / .85); font-size: .95rem; text-align: center; max-width: 60ch; }
.dd-lb button { position: absolute; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%; background: hsl(var(--secondary-foreground) / .14);
  color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.dd-lb button:hover, .dd-lb button:focus-visible { background: hsl(var(--secondary-foreground) / .3); }
.dd-lb-x { top: 1rem; right: 1rem; }
.dd-lb-prev { left: 1rem; top: 50%; margin-top: -1.4rem; }
.dd-lb-next { right: 1rem; top: 50%; margin-top: -1.4rem; }
@media (max-width: 640px) {
  .dd-lb { padding: 4rem .75rem 5rem; }
  .dd-lb-prev, .dd-lb-next { top: auto; bottom: 1rem; margin: 0; }
}

/* ---------- clients page */
.dd-tagline { margin: -.75rem 0 1.5rem; font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.35; font-weight: 700; color: hsl(var(--primary)); text-wrap: balance; }
@media (min-width: 640px) { .dd-tagline { font-size: 1.6rem; } }
.dd-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }
.dd-client { position: relative; display: flex; flex-direction: column; padding: 2rem; border-radius: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--background));
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.dd-client:hover { transform: translateY(-4px); border-color: hsl(var(--primary) / .5); box-shadow: 0 18px 40px hsl(var(--secondary) / .12); }
.dd-client-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: grid; place-items: center; margin-bottom: 1.25rem; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); transition: background .3s ease, color .3s ease; }
.dd-client:hover .dd-client-icon { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.dd-client h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: hsl(var(--foreground)); line-height: 1.25; }
.dd-client-type { margin-top: .4rem; color: hsl(var(--muted-foreground)); font-size: .92rem; }
.dd-client-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.dd-client-loc { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px;
  background: hsl(var(--primary) / .08); color: hsl(var(--primary)); font-size: .8rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dd-client, .dd-client:hover { transform: none; } }

/* ---------- contact form status */
.dd-form-status { margin-top: 1rem; font-size: .92rem; min-height: 1.4em; color: hsl(var(--muted-foreground)); }
.dd-form-status.is-ok { color: hsl(var(--success)); font-weight: 600; }
.dd-form-status.is-error { color: hsl(var(--destructive)); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .dd-photo img, .dd-ii-media img, .dd-photo-cap, .dd-ii-cap { transition: none; }
  .dd-photo:hover img, .dd-ii-frame:hover .dd-ii-media img { transform: none; }
  .dd-dot { animation: none; }
}