/* October photography refresh. Load after launch.css, before mobile-refresh.css. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --surface-border: #ded7e6;
  --surface-shadow: 0 16px 38px -28px #30203955;
}

/* Content starts visible; JavaScript only prepares elements below the viewport. */
.js-motion .reveal {
  opacity: 1;
  translate: none;
  transition:
    opacity .42s var(--motion-ease) var(--reveal-delay, 0ms),
    translate .58s var(--motion-ease) var(--reveal-delay, 0ms),
    transform .25s var(--motion-ease),
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}
.js-motion .reveal.is-reveal-pending { opacity: 0; translate: 0 18px; }
.js-motion .reveal.is-visible,
.js-motion .reveal:focus-within { opacity: 1; translate: none; }
.js-motion .hero-content > .eyebrow,
.js-motion .hero-content > h1,
.js-motion .hero-actions {
  opacity: 1;
  animation: introduction-settle .55s var(--motion-ease) both;
}
.js-motion .hero-actions { animation-delay: .04s; }
.js-motion .hero-picture img { animation: none; }
.js-motion img.image-pending { opacity: 1; filter: none; }
.page-load { display: none; }
.reading-progress { height: 2px; background: #b98bec; }
.scroll-cue b { animation: none; }

@keyframes introduction-settle {
  from { translate: 0 9px; }
  to { translate: none; }
}

.service-card,
.technology-intro-card,
.field-gallery-track > figure {
  border-color: var(--surface-border);
  box-shadow: var(--surface-shadow);
}
.service-grid { perspective: none; }
.service-card.is-before,
.service-card.is-after { transform: scale(.985); }
.service-card.is-current {
  transform: none;
  border-color: #ad84d7;
  box-shadow: 0 18px 38px -27px #53298075;
}
.service-card .service-icon { background: #f3eef9; border: 1px solid #e7dcef; }
.service-card summary { gap: 14px; }
.service-card summary > span,
.faq-list summary > span { flex-shrink: 0; }
details[data-closing] > summary > span { transform: none; }
.faq-list summary { text-wrap: pretty; }
.faq-list details[open] { border-bottom-color: #b996d9; }
.faq-list details[open] > summary { color: #6730af; }
.faq-list details[open] > p { margin-bottom: 25px; }

/* A consistent frame gives the supplied photographs room to speak. */
.field-gallery-track { gap: 20px; padding-bottom: 18px; }
.field-gallery-track > figure { border-radius: 20px; }
.field-gallery-track figcaption { padding: 16px 20px; background: #faf9fb; }
.technology-intro-card > div { background: #faf9fb; }
.smart-image,
.approach-photo,
.monitoring-visual { box-shadow: var(--surface-shadow); }
.image-tag { letter-spacing: .1em; }
.email-option {
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.email-option:focus-within { border-color: #cda5f4; background: #32263e; }

@media (min-width: 761px) {
  .section { padding-block: clamp(68px, 6.1vw, 90px); }
  .section-heading { gap: 48px; margin-bottom: 28px; }
  .section-heading > p { font-size: 16px; line-height: 1.7; margin-bottom: 23px; }
  .section-heading h2 { text-wrap: balance; }
  .hero { min-height: 560px; max-height: 680px; }
  .hero .hero-content { padding-block: 36px; }
  .hero h1,
  html[lang=fr] .hero h1 { font-size: clamp(48px, 5.25vw, 76px); }
  .hero .eyebrow { margin-bottom: 22px; }
  .hero-actions { margin-top: 27px; }
  .js-motion .hero-picture img {
    transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.025);
    transition: none;
  }
  .technology-intro { padding-block: 32px 38px; }
  .technology-intro-card > img { aspect-ratio: 16 / 10; }
  .technology-intro-card > div { padding: 19px 22px 21px; }
  .clients-inner { min-height: 118px; }
  .about { gap: clamp(38px, 5vw, 72px); align-items: start; }
  .about-copy { padding-top: 34px; }
  .services-bottom { padding-top: 18px; }
  .service-grid { padding-top: 16px; padding-bottom: 30px; }
  .service-photo { height: 230px; }
  .service-card .card-top { margin-block: 19px 15px; }
  .service-card h3 { margin-bottom: 12px; }
  .coverage-grid { gap: clamp(38px, 5vw, 68px); }
  .smart-security { padding-bottom: 20px; }
  .smart-layout { gap: 22px; }
  .smart-features article { padding: 23px 25px; }
  .smart-features h3 { line-height: 1.2; margin-block: 10px; }
  .monitoring { padding-bottom: 28px; }
  .monitoring-capabilities { gap: 16px; margin-top: 18px; }
  .monitoring-capabilities > div { padding: 23px 25px; }
  .monitoring-capabilities h3 { margin-block: 10px; }
  .field-gallery-track > figure { flex-basis: calc((100% - 40px) / 3); }
  .field-gallery-track img { aspect-ratio: 4 / 3; }
  .approach { gap: clamp(38px, 5vw, 68px); }
  .approach-photo { height: 580px; }
  .approach-steps > div { margin-top: 17px; padding-top: 19px; }
  .response-banner { height: 430px; padding: 32px; }
  .response-copy { padding: 25px 28px; border-radius: 20px; }
  .response-copy .eyebrow { margin-bottom: 15px; }
  .response-copy h2 { font-size: clamp(29px, 2.8vw, 38px); margin-bottom: 22px; }
  .faq { gap: clamp(38px, 5vw, 68px); align-items: start; }
  .faq > div:first-child { position: sticky; top: 28px; }
  .faq-list summary { min-height: 72px; padding-block: 19px; }
  .contact.section { padding-block: 52px; }
}

/* Hover expresses interactivity without tilting or heavily zooming real people. */
@media (hover: hover) and (pointer: fine) {
  .technology-intro-card:hover,
  .js-motion .technology-intro-card.is-visible:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -25px #42225366;
  }
  .technology-intro-card:hover > img,
  .field-gallery-track > figure:hover img { transform: scale(1.018); }
  .service-card.is-current:hover .service-photo { transform: scale(1.015); }
  .smart-features article:hover,
  .monitoring-capabilities > div:hover,
  .js-motion .smart-features article.is-visible:hover,
  .js-motion .monitoring-capabilities > div.is-visible:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 26px -24px #783bca66;
  }
  .email-option:hover { border-color: #a885cd; background: #32263e; }
  .email-option .button:hover > span { transform: translate(3px, -3px); }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .reveal.is-reveal-pending,
  .js-motion .reveal.is-visible { opacity: 1; translate: none; transform: none; }
  .js-motion .hero-picture img,
  .service-card.is-before,
  .service-card.is-after { transform: none; }
  .technology-intro-card:hover > img,
  .field-gallery-track > figure:hover img,
  .service-card.is-current:hover .service-photo,
  .email-option .button:hover > span { transform: none; }
  .technology-intro-card:hover,
  .js-motion .technology-intro-card.is-visible:hover,
  .smart-features article:hover,
  .monitoring-capabilities > div:hover,
  .js-motion .smart-features article.is-visible:hover,
  .js-motion .monitoring-capabilities > div.is-visible:hover { transform: none; }
}

@media print {
  .js-motion .reveal.is-reveal-pending { opacity: 1; translate: none; }
  .faq > div:first-child { position: static; }
}