/* ==========================================================================
   SITE LAYOUT
   Colors and fonts come from theme.css. This file is organized in the same
   order as the sections on the page:

     1. Base text
     2. Navigation bar
     3. Hero video
     4. Shared section styles
     5. Who we are
     6. Services (cards)
     7. Photo bands and parallax
     8. LADBX
     9. Security
    10. Partners
    11. Contact
    12. Footer
    13. Certificate pop-up (modal)
    14. Accessibility helpers
   ========================================================================== */


/* 1. Base text ------------------------------------------------------------ */

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: 1.6;
  background-color: var(--color-background);
  color: var(--color-text);
}

h1, h2, h3, h4 {
  font-family: var(--font-family);
  font-stretch: var(--heading-stretch);
  font-weight: var(--heading-weight);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

p {
  max-width: var(--content-width);
}

a {
  text-underline-offset: 0.2em;
}

/* Jumping to a section from the menu should not hide the heading
   underneath the fixed navigation bar. */
section[id] {
  scroll-margin-top: 4.5rem;
}


/* 2. Navigation bar ------------------------------------------------------- */

.site-nav {
  --bs-navbar-nav-link-padding-x: 0.85rem;   /* space between menu links */
  padding-block: 0.75rem;
  /* Clear over the video; becomes solid once the page scrolls (see site.js) */
  background-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}

.site-nav.is-solid,
.site-nav:has(.navbar-collapse.show),
.site-nav:has(.navbar-collapse.collapsing) {
  background-color: var(--color-surface);
  border-bottom-color: var(--color-rule);
}

.site-nav .navbar-brand img {
  height: 40px;
  width: auto;
}

.site-nav .nav-link {
  font-weight: 560;
  font-size: var(--text-small);
  color: var(--color-text);
  padding-block: 0.45rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Mouseover (and keyboard focus): a rounded rectangle in the button blue */
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
  color: var(--color-on-accent);
  background-color: var(--color-accent);
}

/* Social icons, always visible at the top right */
.header-social {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1rem;
  color: var(--color-text);
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.header-social a:hover,
.header-social a:focus-visible {
  color: var(--color-on-accent);
  background-color: var(--color-accent);
}

/* Narrow phones: slightly smaller logo, icons and menu button so the logo,
   all five icons and the menu button fit on one line (checked at 320px). */
@media (max-width: 419.98px) {
  .site-nav .navbar-brand img {
    height: 30px;
  }

  .header-social a {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.9rem;
  }

  .site-nav .navbar-brand {
    margin-right: 0.5rem;
  }

  .header-social {
    gap: 0.05rem;
  }

  .site-nav .navbar-toggler {
    padding: 0.25rem 0.45rem;
    margin-left: 0.25rem;
    font-size: 1rem;              /* sizes the menu-button icon */
  }
}

.site-nav .navbar-toggler {
  border-color: var(--color-rule);
}


/* 3. Hero video ----------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;          /* avoids mobile browser toolbar overlap */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-background);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fill the screen at any size, crop edges */
}

/* Darkens the bottom of the video so the title stays readable over any frame */
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 14, 20, 0.92) 0%,
    rgba(12, 14, 20, 0.55) 35%,
    rgba(12, 14, 20, 0.15) 70%,
    rgba(12, 14, 20, 0.35) 100%
  );
}

/* The title block sits low and to the left, like a broadcast lower-third */
.hero-content {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(5rem, 11vh, 7rem);  /* leaves room for the pause button */
}

.hero-title {
  font-size: var(--heading-xl);
  font-stretch: 70%;
  font-weight: 800;
  max-width: 14ch;
  margin-bottom: 1.25rem;
}

.hero-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-text);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Translucent, frosted box behind the hero text (top of the page only).
   --hero-panel-opacity in theme.css sets how dark it is. */
.hero-panel {
  width: fit-content;
  max-width: 100%;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  background-color: rgba(12, 14, 20, var(--hero-panel-opacity));
  -webkit-backdrop-filter: blur(var(--hero-panel-blur));   /* Safari */
  backdrop-filter: blur(var(--hero-panel-blur));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.hero-panel .hero-lede {
  margin-bottom: 1.5rem;
}

/* Pause / play button, required so visitors can stop the moving video */
.hero-video-toggle {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: var(--text-small);
  color: var(--color-text);
  background-color: rgba(12, 14, 20, 0.6);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
}

.hero-video-toggle:hover {
  border-color: var(--color-text-muted);
}


/* Buttons used in the hero and contact sections */
.btn-accent {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-active-bg: var(--color-accent-hover);
  font-weight: 640;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
}

.btn-outline-light {
  font-weight: 560;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
}


/* 4. Shared section styles ------------------------------------------------ */

.section {
  padding-block: var(--section-spacing);
}

.section-alt {
  background-color: var(--color-surface);
}

/* Centered title with a short accent line beneath, as on the old site */
.section-header {
  text-align: center;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.section-header h2 {
  font-size: var(--heading-lg);
  margin-bottom: 0.75rem;
}

.section-header h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0.75rem auto 0;
  background-color: var(--color-accent);
}

.section-header p {
  color: var(--color-text-muted);
  font-size: 1.15rem;
  margin-inline: auto;
}


/* 5. Who we are --------------------------------------------------------- */

/* A shorter band than the other sections: it's two paragraphs */
.section.about {
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
}

.about-title {
  font-size: var(--heading-lg);
  margin-bottom: 0;
}

.about-text {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-text);
}

.about-text-secondary {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}


/* 6. Services (flip cards) ----------------------------------------------- */

/* Each card has two faces stacked in the same spot: the FRONT (icon and big
   service name) and the BACK (the full list). Turning the card over is a
   3D rotation of .service-card-inner. js/site.js adds "is-flipped" on hover,
   or when "View services" is pressed.

   Both faces share one grid cell, so the card is always as tall as its
   longer face and nothing needs a fixed height. */
.service-card {
  height: 100%;
  perspective: 1400px;          /* depth of the 3D turn */
}

.service-card-inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.service-card.is-flipped .service-card-inner {
  transform: rotateY(180deg);
}

.service-face {
  grid-area: 1 / 1;             /* front and back sit on top of each other */
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.35rem 1.15rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  -webkit-backface-visibility: hidden;   /* Safari */
  backface-visibility: hidden;           /* hide each face while it's turned away */
  transition: border-color 0.2s ease;
}

.service-back {
  transform: rotateY(180deg);   /* starts facing away */
}

/* Accent border on whichever face is showing while the card is active */
.service-card:hover .service-face,
.service-card.is-flipped .service-face {
  border-color: var(--color-accent);
}

/* FRONT: icon and service name, centered, in large condensed type */
.service-front {
  align-items: center;
  text-align: center;
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-top: auto;             /* with the title's margin, centers the pair */
  margin-bottom: 1rem;
  font-size: 1.45rem;
  color: var(--color-accent);
  border: 1px solid var(--color-rule);
  border-radius: 50%;
}

.service-title {
  font-size: clamp(1.7rem, 2.3vw, 2.2rem);   /* big, like ladb.com's service cards */
  font-stretch: 70%;
  font-weight: 800;
  line-height: 1.02;
  margin-bottom: auto;
}

/* Small label at the top of the back, so a turned card still says which
   service it is. js/site.js copies it from the front title, so the name is
   only typed once. */
.service-back-title {
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* "View services" and "Back" buttons */
.service-flip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-accent);
}

.service-flip:hover {
  color: var(--color-accent-hover);
}

.service-flip-back {
  align-self: flex-start;
  margin-top: auto;             /* sits at the bottom of the back face */
  padding-top: 0.75rem;
}

/* BACK: the full list in smaller type */
.service-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.35;
}

.service-list li {
  position: relative;
  padding: 0.18rem 0 0.18rem 0.95rem;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* Visitors who ask for reduced motion: the card switches faces instantly
   instead of rotating (the global rule at the end of this file removes the
   animation; this keeps the faces from appearing mirrored). */
@media (prefers-reduced-motion: reduce) {
  .service-card-inner {
    transition: none;
  }
}


/* 7. Photo bands and parallax -------------------------------------------- */

.photo-band {
  position: relative;
  height: clamp(150px, 26vh, 270px);
  overflow: hidden;
  background-color: var(--color-surface);
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.8);
}

/* Parallax bands: the photo is taller than the band, and site.js slides it
   up or down as the page scrolls. The extra 20% above and below is how far
   it can move without showing an edge. */
.photo-band[data-parallax] {
  height: clamp(200px, 38vh, 380px);
}

.photo-band[data-parallax] img {
  position: absolute;
  left: 0;
  top: -20%;
  height: 140%;
  will-change: transform;
}


/* 8. LADBX ---------------------------------------------------------------- */

.ladbx-video-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-background);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
}

.ladbx-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ladbx-title {
  font-size: var(--heading-lg);
  margin-bottom: 1rem;
}

.ladbx-lede {
  font-size: 1.15rem;
  color: var(--color-text);
}

.ladbx-services-title {
  font-size: var(--heading-md);
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0.5rem;
}

/* Services flow into one, two or three columns depending on width */
.ladbx-services {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
  column-gap: 2.5rem;
}

@media (min-width: 576px) {
  .ladbx-services { column-count: 2; }
}

@media (min-width: 992px) {
  .ladbx-services { column-count: 3; }
}

.ladbx-services li {
  padding-block: 0.35rem;
  border-top: 1px solid var(--color-rule);
  break-inside: avoid;
}

/* Pause and sound buttons that sit on top of a video */
.video-controls {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

.video-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: var(--text-small);
  color: var(--color-text);
  background-color: rgba(12, 14, 20, 0.7);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
}

.video-control:hover {
  border-color: var(--color-text-muted);
}


/* Brand letters, the same wherever the word appears:
   the X in "LADBX" is always bold brand red, and the D in "StreamD" is the
   StreamD logo D in brand blue. (index.html wraps them as LADB<span class="ladbx-x">X</span>
   and Stream<span class="streamd-d">D</span>.) */
.ladbx-x {
  color: var(--color-ladbx-x);
  font-weight: 900;             /* always bold: Archivo's heaviest weight */
}

/* The logo D is drawn much taller than normal letters, so it's scaled down
   until its body matches the capital letters around it; its antenna rises
   above them, as in the logo. The font has one weight, so the browser is
   told not to fake a bolder one. */
.streamd-d {
  color: var(--color-streamd-d);
  font-family: "StreamD Logo", var(--font-family);
  font-size: calc(var(--streamd-d-scale) * 1em);
  font-weight: 400;
  font-synthesis: none;
}


/* The LADBX title, and "LADBX" at the start of the description and in the
   "LADBX services" heading, link to ladbx.com. All three get a blue
   underline that sweeps in on mouseover or keyboard focus. The title also
   has these extra clues:
   - always: a small arrow (the usual "goes to another site" icon);
   - on mouseover or keyboard focus: the arrow turns blue and nudges
     up-right, and a "ladbx.com" label slides in;
   - on phones (no mouseover) the "ladbx.com" label is always shown. */
.ladbx-link {
  color: inherit;
  text-decoration: none;
}

.ladbx-text-link {
  color: inherit;
  text-decoration: none;
}

.ladbx-name,
.ladbx-text-link {
  /* the underline is a background line that grows from 0% to 100% wide */
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% max(2px, 0.08em);   /* at least 2px thick on smaller text */
  transition: background-size 0.35s ease;
}

.ladbx-link-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.25em;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-stretch: 100%;
  font-weight: 600;
  vertical-align: 0.5em;          /* sits beside the top half of the big title */
  color: var(--color-text-muted);
  transition: color 0.25s ease;
}

.ladbx-link-hint .bi {
  transition: transform 0.25s ease;
}

.ladbx-link-label {
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ladbx-link:hover .ladbx-name,
.ladbx-link:focus-visible .ladbx-name,
.ladbx-text-link:hover,
.ladbx-text-link:focus-visible {
  background-size: 100% max(2px, 0.08em);
}

.ladbx-link:hover .ladbx-link-hint,
.ladbx-link:focus-visible .ladbx-link-hint {
  color: var(--color-accent);
}

.ladbx-link:hover .ladbx-link-hint .bi,
.ladbx-link:focus-visible .ladbx-link-hint .bi {
  transform: translate(0.15em, -0.15em);
}

.ladbx-link:hover .ladbx-link-label,
.ladbx-link:focus-visible .ladbx-link-label {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .ladbx-link-label {
    opacity: 1;
    transform: none;
  }
}


/* 9. Security ------------------------------------------------------------ */

/* Sits inside the section header, so it overrides that header's muted text */
.section-header .security-quote {
  font-size: clamp(3.9rem, 6.9vw, 5.25rem);   /* 3x the earlier size at every screen width */
  font-stretch: var(--heading-stretch);
  font-weight: 700;
  line-height: 1.05;                          /* tighter lines suit large display text */
  text-wrap: balance;                         /* even line lengths, no one-word last line */
  color: var(--color-text);
  max-width: 30ch;
  margin-top: 1.1rem;
}

/* Certificate badges: each one is a button that opens a larger view */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 52rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .cert-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  cursor: zoom-in;
}

.cert:hover {
  border-color: var(--color-accent);
}

.cert img {
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* Certificate art is usually dark-on-white; a light panel keeps it legible */
  background-color: #FFFFFF;
  border-radius: 4px;
  padding: 0.5rem;
}

.cert-name {
  font-weight: 640;
  font-size: var(--text-small);
}

.cert-hint {
  margin: 0.75rem auto 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* Detail tabs for each standard. Same width as the certificate row above,
   so the panel isn't half empty beside its text. */
.security-details {
  max-width: 52rem;
  margin-inline: auto;
}

/* Detail tabs (continued) */
.security-details {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.security-details .nav-tabs {
  --bs-nav-tabs-border-color: var(--color-rule);
  --bs-nav-tabs-link-active-color: var(--color-text);
  --bs-nav-tabs-link-active-bg: var(--color-surface);
  --bs-nav-tabs-link-active-border-color: var(--color-rule) var(--color-rule) var(--color-surface);
  --bs-nav-link-color: var(--color-text-muted);
  --bs-nav-link-hover-color: var(--color-text);
  font-weight: 600;
}

/* All three tab panels share one spot, stacked on top of each other, and
   only the selected one is visible. The box is therefore always as tall as
   the longest panel, so switching tabs never changes the section's height
   (which would re-size the background photo and move the page below).
   Hidden panels use visibility: hidden, which also keeps them out of
   keyboard focus and screen readers. */
.security-details .tab-content {
  display: grid;
}

.security-details .tab-content > .tab-pane {
  display: block;               /* Bootstrap normally removes hidden panels */
  grid-area: 1 / 1;             /* every panel in the same grid cell */
  visibility: hidden;
}

.security-details .tab-content > .tab-pane.active {
  visibility: visible;
}

.security-details .tab-content {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background-color: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-top: 0;
}

.security-details .tab-pane h3 {
  font-size: var(--heading-md);
  margin-bottom: 1rem;
}

.security-details .standard-summary {
  font-size: 1.15rem;
  color: var(--color-text);
}

.security-details .tab-pane p:not(.standard-summary) {
  color: var(--color-text-muted);
}


/* 10. Partners ----------------------------------------------------------- */

/* The logos sit in a grid of same-size 16:9 cells (the shape of the
   300 x 169 logo files). Each logo is centered in its cell and scaled to fit
   without stretching. --columns is read by site.js to fill the last row. */
.partner-list {
  --columns: var(--partner-columns);
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--partner-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 991.98px) {
  .partner-list {
    --columns: var(--partner-columns-tablet);
  }
}

@media (max-width: 575.98px) {
  .partner-list {
    --columns: var(--partner-columns-phone);
  }
}

.partner-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
}

.partner-list img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
}

/* Moving layout: a window exactly two rows tall (site.js measures the rows
   and sets --partner-window-height). The track holds the grid twice, one
   above the other; sliding it up by exactly half brings the second copy
   into the first copy's place, so the loop has no visible seam. The padding
   under each grid keeps the gap between the last and first row even. */
.partner-marquee.is-scrolling {
  height: var(--partner-window-height);
  overflow: hidden;
  /* Rows fade in at the bottom and out at the top instead of being cut off */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.partner-marquee.is-scrolling .partner-track {
  animation: partner-scroll var(--partner-duration, 40s) linear infinite;
}

.partner-marquee.is-scrolling .partner-list {
  padding-bottom: var(--partner-gap);
}

@keyframes partner-scroll {
  to {
    transform: translateY(-50%);
  }
}

/* Paused while the mouse is over the logos, or by the pause button */
.partner-marquee.is-scrolling:hover .partner-track,
.partner-marquee.is-paused .partner-track {
  animation-play-state: paused;
}

.partner-controls {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* No empty space when the button is hidden (still layout) */
.partner-controls:has(> [hidden]) {
  display: none;
}


/* 11. Contact ------------------------------------------------------------- */

.contact {
  position: relative;
  overflow: hidden;
}

/* Office map image sits faintly behind the contact details */
.contact-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  pointer-events: none;
}

.contact .container {
  position: relative;
}

.contact-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: 54rem;
  margin: 0 auto 1.75rem;
}

.contact-item h3 {
  font-size: var(--text-small);
  font-stretch: 100%;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.contact-item p,
.contact-item a {
  font-size: 1.2rem;
  font-weight: 560;
  color: var(--color-text);
  margin-bottom: 0;
}

.contact-item a:hover {
  color: var(--color-accent-hover);
}
/* 12. Footer -------------------------------------------------------------- */

.site-footer {
  padding-block: 2.5rem 1.5rem;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.site-footer h2 {
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 640;
  margin-bottom: 0.9rem;
}

.site-footer ul {
  list-style: none;
  padding-left: 0;
}

.site-footer li {
  padding-block: 0.2rem;
}

.site-footer a {
  color: var(--color-text-muted);
}

.site-footer a:hover {
  color: var(--color-text);
}

/* Footer certificate links are buttons (they open the pop-up) styled as links */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.link-button:hover {
  color: var(--color-text);
}

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-rule);
}


/* 13. Certificate pop-up -------------------------------------------------- */

.modal-content {
  background-color: var(--color-surface);
  border: 1px solid var(--color-rule);
}

.cert-modal-image {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  background-color: #FFFFFF;
  border-radius: 4px;
}


/* 14. Accessibility helpers ----------------------------------------------- */

/* A clearly visible outline for keyboard users on every interactive element */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 3px;
  box-shadow: none;
}

/* Fade-in as sections scroll into view (like apple.com).
   Anything marked data-reveal in index.html starts slightly lower and
   invisible, then fades up each time it scrolls into view. js/site.js adds "reveal-enabled" to the page
   only when it can run the effect, so without JavaScript (or for visitors
   who ask for reduced motion) everything simply shows. */
.reveal-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  /* No transition here on purpose: blocks become hidden instantly when the
     page loads. (Animating this made blocks near the top still be fading
     OUT if a visitor scrolled down right away, so they never visibly faded in.) */
}

/* Only the fade-in is animated */
.reveal-enabled [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);   /* staggers cards in a row */
}

/* "Skip to content" link: hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 640;
  border-radius: 4px;
}

.skip-link:focus {
  top: 1rem;
}

/* Visitors who ask their device for less motion get no animated transitions.
   (site.js also leaves the hero video paused for them.) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}