:root { --about-max: 1180px; }
.about-page { background:#020910; }
.about-shell { background-image:none; }
.about-container { width:min(var(--about-max), calc(100% - 48px)); margin:0 auto; }
.about-header { max-width:var(--about-max); padding-left:0; padding-right:0; grid-template-columns:auto 1fr auto auto; }
.about-nav { gap:34px; }
.about-nav .is-active { color:#28ccff; position:relative; }
.about-nav .is-active::after { content:""; position:absolute; left:0; right:0; bottom:-17px; height:3px; background:#18c7ff; box-shadow:0 0 12px rgba(24,199,255,.35); }
.about-menu-toggle { display:none; }

.about-main { background:linear-gradient(180deg,#07131d 0,#04101a 58%,#030b12 100%); }
.about-hero { position:relative; min-height:510px; overflow:hidden; border-bottom:1px solid rgba(44,172,231,.22); }
.about-hero-media { position:absolute; inset:0 0 0 42%; background:#07111a url('assets/about-hero-office.png') 75% center/cover no-repeat; }
.about-hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,9,15,.95) 0%,rgba(2,9,15,.3) 35%,rgba(2,9,15,.03) 72%); }
.about-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#06111a 0%,rgba(6,17,26,.93) 35%,rgba(6,17,26,.48) 55%,rgba(6,17,26,.06) 78%); }
.about-hero-inner { position:relative; z-index:2; min-height:510px; display:flex; align-items:center; }
.about-hero-copy { width:52%; padding:30px 0; }
.about-hero h1 { margin:0 0 20px; font-size:clamp(2.7rem,4vw,4.15rem); line-height:1; letter-spacing:-.04em; font-weight:800; white-space:nowrap; }
.about-title-line { display:inline; white-space:nowrap; }
.about-lead { margin:0; font-size:clamp(1.28rem,1.72vw,1.58rem); line-height:1.46; font-weight:600; letter-spacing:-.035em; }
.about-description { margin:18px 0 0; color:rgba(229,241,249,.82); font-size:1.02rem; line-height:1.68; letter-spacing:-.02em; }

.about-section { border-bottom:1px solid rgba(44,172,231,.22); background:linear-gradient(180deg,rgba(4,14,23,.96),rgba(3,11,18,.98)); }
.about-section .about-container { padding:44px 0 50px; }
.about-section-label { margin:0 0 30px; color:#22cfff; font-size:.95rem; font-weight:700; letter-spacing:.42em; }
.about-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.about-feature { min-height:235px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 40px; position:relative; }
.about-feature + .about-feature::before { content:""; position:absolute; left:0; top:17%; bottom:17%; width:1px; background:rgba(64,159,210,.27); }
.about-icon { width:76px; height:76px; display:grid; place-items:center; color:#f7fbff; margin-bottom:22px; }
.about-icon svg { width:100%; height:100%; filter:drop-shadow(0 0 10px rgba(52,194,255,.1)); }
.about-feature h2 { margin:0 0 10px; font-size:1.55rem; line-height:1.25; letter-spacing:-.035em; }
.about-feature p { margin:0; color:rgba(225,239,247,.8); font-size:1.07rem; line-height:1.65; }
.value-section .about-container { padding-top:38px; padding-bottom:44px; }
.value-item { min-height:185px; }
.value-item .about-icon { width:65px; height:65px; margin-bottom:14px; }
.value-item h2 { font-size:1.12rem; letter-spacing:.07em; margin-bottom:8px; }
.value-item p { font-size:1.05rem; }

.about-footer { background:#030b12; }
.about-footer-inner { min-height:140px; display:grid; grid-template-columns:250px 1fr auto; grid-template-rows:auto auto; align-items:center; gap:10px 34px; padding:18px 0 16px; }
.about-footer .footer-logo { width:220px; }
.about-footer-nav { justify-self:center; gap:44px; }
.about-footer-nav a { font-size:.78rem; font-weight:600; }
.about-social { justify-self:end; }
.about-copyright { grid-column:1/3; color:rgba(211,229,239,.72); font-size:.6rem; }
.about-footer-slogan { grid-column:3; margin:0; text-align:right; color:rgba(229,242,248,.8); font-size:.61rem; }

@media (max-width:1050px){
  .about-header { width:calc(100% - 40px); }
  .about-nav { gap:20px; }
  .about-hero-copy { width:58%; }
  .about-hero-media { left:38%; }
  .about-feature { padding-left:22px; padding-right:22px; }
}
@media (max-width:900px){
  .about-container { width:min(100% - 36px,var(--about-max)); }
  .about-header { width:auto; padding:0 20px; grid-template-columns:auto 1fr auto; }
  .about-nav { display:none; }
  .about-nav.open { display:flex; }
  .about-menu-toggle { display:block; }
  .about-hero { min-height:auto; }
  .about-hero-inner { min-height:auto; padding-top:42px; padding-bottom:0; display:block; }
  .about-hero-copy { width:100%; padding:22px 0 24px; }
  .about-hero h1 { font-size:clamp(2.1rem,7.5vw,3.2rem); white-space:nowrap; }
  .about-lead { font-size:1.24rem; }
  .about-description { font-size:.98rem; margin-top:16px; }
  .about-hero-media { position:relative; inset:auto; height:450px; width:100%; background-position:center; }
  .about-hero-media::after { background:linear-gradient(180deg,rgba(4,12,20,.25),rgba(4,12,20,.02)); }
  .about-hero-shade { display:none; }
  .about-feature-grid { grid-template-columns:1fr; }
  .about-feature { min-height:205px; }
  .about-feature + .about-feature::before { left:18%; right:18%; top:0; bottom:auto; width:auto; height:1px; }
  .about-footer-inner { grid-template-columns:1fr auto; grid-template-rows:auto auto auto; }
  .about-footer-nav { grid-column:1/-1; justify-self:start; gap:24px; }
  .about-copyright { grid-column:1; }
  .about-footer-slogan { grid-column:2; }
}
@media (max-width:620px){
  .about-container { width:calc(100% - 32px); }
  .about-header .brand-logo { width:160px; }
  .about-hero-inner { padding-top:14px; }
  .about-hero h1 { margin-bottom:18px; font-size:clamp(1.85rem,7.8vw,2.8rem); white-space:nowrap; }
  .about-lead { font-size:1.12rem; }
  .about-description { font-size:.9rem; }
  .about-hero-media { height:330px; background-size:cover; }
  .about-section .about-container { padding:32px 0 34px; }
  .about-section-label { font-size:.78rem; letter-spacing:.34em; margin-bottom:16px; }
  .about-icon { width:64px; height:64px; margin-bottom:16px; }
  .about-feature h2 { font-size:1.35rem; }
  .about-feature p { font-size:.96rem; }
  .about-footer-inner { grid-template-columns:1fr; gap:16px; }
  .about-footer .footer-logo { width:200px; }
  .about-footer-nav { flex-wrap:wrap; gap:14px 22px; }
  .about-social { justify-self:start; }
  .about-copyright,.about-footer-slogan { grid-column:1; text-align:left; }
}


/* 2026-10-01: replace about hero visual with the supplied SENTRY signature artwork */
.about-hero-media {
  background:
    #dbdbdb url('assets/about-hero-sentry-brand-20261001.png') center center / 92% auto no-repeat !important;
}

.about-hero-media::after {
  background: linear-gradient(90deg, rgba(2,9,15,.94) 0%, rgba(2,9,15,.38) 34%, rgba(2,9,15,0) 74%) !important;
}

@media (max-width: 900px) {
  .about-hero-media {
    background:
      #dbdbdb url('assets/about-hero-sentry-brand-20261001.png') center center / 94% auto no-repeat !important;
  }
}

@media (max-width: 620px) {
  .about-hero-media {
    background-size: 96% auto !important;
  }
}


/* 2026-10-01: swap to the new SENTRY symbol artwork and remove the bright overlay */
.about-hero-media {
  background:
    #dbdbdb url('assets/about-hero-sentry-symbol-20261001.png') center center / 92% auto no-repeat !important;
}

.about-hero-media::after {
  content: none !important;
  background: transparent !important;
}

@media (max-width: 900px) {
  .about-hero-media {
    background:
      #dbdbdb url('assets/about-hero-sentry-symbol-20261001.png') center center / 94% auto no-repeat !important;
  }
}

@media (max-width: 620px) {
  .about-hero-media {
    background-size: 96% auto !important;
  }
}


/* 2026-10-01: compact transparent SENTRY symbol beside the ABOUT copy */
@media (min-width: 901px) {
  .about-hero {
    min-height: 430px !important;
  }

  .about-hero-inner {
    min-height: 430px !important;
  }

  .about-hero-copy {
    width: 55% !important;
    padding: 24px 0 !important;
  }

  .about-hero-media {
    position: absolute !important;
    left: auto !important;
    right: 7% !important;
    top: 50% !important;
    bottom: auto !important;
    width: 31% !important;
    height: 72% !important;
    transform: translateY(-50%) !important;
    background-color: transparent !important;
    background-image: url('assets/about-hero-sentry-symbol-20261001.png') !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  .about-hero-media::after {
    content: none !important;
    display: none !important;
  }

  .about-hero-shade {
    background:
      linear-gradient(90deg,
        #06111a 0%,
        rgba(6,17,26,.96) 42%,
        rgba(6,17,26,.62) 56%,
        rgba(6,17,26,.18) 70%,
        rgba(6,17,26,0) 82%) !important;
    pointer-events: none;
  }
}

/* On tablet/mobile, keep the symbol compact beneath the copy instead of filling the screen. */
@media (max-width: 900px) {
  .about-hero-media {
    position: relative !important;
    inset: auto !important;
    width: min(72vw, 310px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 6px auto 30px !important;
    transform: none !important;
    background-color: transparent !important;
    background-image: url('assets/about-hero-sentry-symbol-20261001.png') !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}

@media (max-width: 620px) {
  .about-hero-media {
    width: min(68vw, 250px) !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
}


/* 2026-10-02: ABOUT copy update — longer narrative text */
.about-hero h1 {
  font-size: clamp(2.2rem, 3.4vw, 3.5rem) !important;
  letter-spacing: -.035em !important;
}

.about-lead {
  font-size: clamp(1.15rem, 1.7vw, 1.55rem) !important;
  line-height: 1.45 !important;
  margin-bottom: 16px !important;
}

.about-desc {
  font-size: .98rem !important;
  line-height: 1.85 !important;
  max-width: 640px !important;
}

.about-desc strong {
  color: #fff;
  font-weight: 800;
}

@media (max-width: 900px) {
  .about-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    white-space: normal !important;
  }

  .about-lead {
    font-size: 1.08rem !important;
  }

  .about-desc {
    font-size: .93rem !important;
    line-height: 1.75 !important;
  }
}


/* 2026-10-02: verified ABOUT hero copy */
.about-hero-copy #about-title {
  font-size: clamp(2.15rem, 3.35vw, 3.45rem) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.about-hero-copy .about-lead {
  margin-top: 22px !important;
  font-size: clamp(1.12rem, 1.55vw, 1.45rem) !important;
  line-height: 1.45 !important;
}

.about-hero-copy .about-description {
  margin-top: 18px !important;
  max-width: 660px !important;
  font-size: .96rem !important;
  line-height: 1.82 !important;
}

.about-hero-copy .about-description strong {
  color: #fff !important;
  font-weight: 800 !important;
}

@media (max-width: 900px) {
  .about-hero-copy #about-title {
    font-size: clamp(1.7rem, 6.8vw, 2.6rem) !important;
    white-space: normal !important;
  }

  .about-hero-copy .about-lead {
    margin-top: 18px !important;
    font-size: 1.04rem !important;
  }

  .about-hero-copy .about-description {
    font-size: .9rem !important;
    line-height: 1.75 !important;
  }
}


/* 2026-10-02: expanded OUR MISSION / OUR VALUE copy */
.mission-section .about-feature {
  min-height: 300px;
  padding-left: 30px;
  padding-right: 30px;
}
.mission-section .about-feature h2 {
  font-size: 1.38rem;
  margin-bottom: 14px;
}
.mission-section .about-feature p {
  font-size: .94rem;
  line-height: 1.75;
  word-break: keep-all;
}
.value-section .value-item {
  min-height: 260px;
  padding-left: 30px;
  padding-right: 30px;
}
.value-section .value-item h2 {
  font-size: 1.08rem;
  letter-spacing: .08em;
  margin-bottom: 11px;
}
.value-section .value-item p {
  font-size: .9rem;
  line-height: 1.72;
  word-break: keep-all;
}
.value-section .value-item p strong {
  display: inline-block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}
@media (max-width: 900px) {
  .mission-section .about-feature,
  .value-section .value-item {
    min-height: 0;
    padding-top: 34px;
    padding-bottom: 34px;
  }
  .mission-section .about-feature h2 {
    font-size: 1.25rem;
  }
  .mission-section .about-feature p,
  .value-section .value-item p {
    font-size: .9rem;
    line-height: 1.7;
  }
}


/* 2026-10-15 v54: single-photo carousel with manual arrows, no gradients */
.about-office-slider {
  position: absolute !important;
  left: auto !important;
  right: 5.5% !important;
  top: 50% !important;
  bottom: auto !important;
  width: 34% !important;
  height: 72% !important;
  max-height: 310px !important;
  min-height: 250px !important;
  transform: translateY(-50%) !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove every old edge gradient / mask. */
.about-office-slider::before,
.about-office-slider::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.about-carousel-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #07111a;
}

.about-carousel-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  opacity: 0;
  visibility: hidden;
  transform: translateX(3%);
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}

.about-carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 1;
}

.about-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.about-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(3,11,18,.78);
  color: #fff;
  font: 300 34px/1 Arial, sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.about-carousel-arrow:hover {
  background: rgba(20,199,255,.18);
  border-color: rgba(34,207,255,.72);
}

.about-carousel-prev { left: -58px; }
.about-carousel-next { right: -58px; }

.about-carousel-counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 5;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(3,11,18,.72);
  color: rgba(255,255,255,.9);
  font-size: .72rem;
  letter-spacing: .08em;
  pointer-events: none;
}

/* Fullscreen lightbox retained for clicking the current photo. */
.about-photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
  background: rgba(1,7,12,.90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.about-photo-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.about-photo-lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(88vw, 1500px);
  height: min(84vh, 980px);
  outline: none;
}

.about-photo-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0,0,0,.46);
}

.about-photo-lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(3,11,18,.78);
  color: #fff;
  font: 300 30px/1 Arial, sans-serif;
  cursor: pointer;
}

body.about-lightbox-open { overflow: hidden; }

@media (max-width: 900px) {
  .about-office-slider {
    position: relative !important;
    inset: auto !important;
    width: min(82vw, 520px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    margin: 6px auto 34px !important;
    transform: none !important;
  }

  .about-carousel-prev { left: -52px; }
  .about-carousel-next { right: -52px; }
}

@media (max-width: 620px) {
  .about-office-slider {
    width: calc(100% - 70px) !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
  }

  .about-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 29px;
  }

  .about-carousel-prev { left: -44px; }
  .about-carousel-next { right: -44px; }

  .about-photo-lightbox { padding: 18px; }
  .about-photo-lightbox__stage { width: 94vw; height: 82vh; }
  .about-photo-lightbox__close { top: -12px; right: -4px; width: 38px; height: 38px; font-size: 27px; }
}


/* 2026-10-15 v55: make both carousel arrows reliably clickable */
.about-office-slider {
  z-index: 4 !important;
  pointer-events: auto !important;
}

.about-carousel-viewport {
  z-index: 1;
}

.about-carousel-arrow {
  z-index: 20 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.about-carousel-prev,
.about-carousel-next {
  pointer-events: auto !important;
}

.about-hero-shade {
  pointer-events: none !important;
}

.about-hero-inner {
  pointer-events: none;
}

.about-hero-copy {
  pointer-events: auto;
}


/* 2026-10-19 v58: OUR MISSION copy-focused layout */
.mission-section .mission-copy-grid { gap: 22px; }
.mission-section .mission-copy-card {
  min-height: 245px;
  padding: 34px 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.mission-section .mission-copy-card .about-icon { display: none !important; }
.mission-section .mission-copy-card h2 {
  margin: 0 0 20px;
  font-size: clamp(1.18rem, 1.55vw, 1.48rem);
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  word-break: keep-all;
}
.mission-section .mission-highlight {
  display: inline;
  padding-bottom: 6px;
  background-image: linear-gradient(#7ad8ff, #7ad8ff);
  background-size: 100% 4px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.mission-section .mission-copy-card p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.82;
  color: #c8d1da;
  word-break: keep-all;
}
@media (max-width: 900px) {
  .mission-section .mission-copy-card { min-height: 0; padding: 30px 26px 32px; }
  .mission-section .mission-copy-card h2 { font-size: 1.18rem; margin-bottom: 16px; }
  .mission-section .mission-copy-card p { font-size: .9rem; line-height: 1.72; }
}


/* 2026-10-19 v59: OUR MISSION 3-line typography refinement */
.mission-section .mission-copy-card {
  align-items: center !important;
  text-align: center;
  padding: 34px 28px 36px;
}
.mission-section .mission-copy-card h2 {
  width: 100%;
  margin-bottom: 18px;
  text-align: center;
  font-size: clamp(1.06rem, 1.32vw, 1.36rem);
  line-height: 1.42;
  letter-spacing: -.038em;
}
.mission-section .mission-highlight { white-space: nowrap; }
.mission-section .mission-copy-card p {
  width: 100%;
  text-align: center !important;
  font-size: .94rem;
  line-height: 1.72;
  letter-spacing: -.012em;
}
@media (max-width: 1120px) and (min-width: 901px) {
  .mission-section .mission-copy-card { padding-left: 18px; padding-right: 18px; }
  .mission-section .mission-copy-card h2 { font-size: 1rem; letter-spacing: -.045em; }
  .mission-section .mission-copy-card p { font-size: .86rem; letter-spacing: -.018em; }
}
@media (max-width: 900px) {
  .mission-section .mission-highlight { white-space: normal; }
  .mission-section .mission-copy-card h2,
  .mission-section .mission-copy-card p { text-align: center !important; }
}


/* 2026-10-19 v62: remove blue underline from OUR MISSION slogans */
.mission-section .mission-highlight {
  padding-bottom: 0 !important;
  background-image: none !important;
  background-size: 0 !important;
  background-position: initial !important;
  background-repeat: initial !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.mission-section .mission-highlight::before,
.mission-section .mission-highlight::after {
  content: none !important;
  display: none !important;
}


/* 2026-10-20 v64: ABOUT English mission line-balance */
html[lang="en"] .mission-section .mission-copy-card {
  padding: 34px 22px 36px;
}

html[lang="en"] .mission-section .mission-copy-card h2 {
  width: 100%;
  min-height: 3.05em;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(1rem, 1.16vw, 1.2rem);
  line-height: 1.34;
  letter-spacing: -.035em;
}

html[lang="en"] .mission-section .mission-highlight--en {
  display: inline-block;
  white-space: normal !important;
  line-height: 1.34;
}

html[lang="en"] .mission-section .mission-copy-card p {
  width: 100%;
  min-height: 6.9em;
  margin: 0;
  text-align: center !important;
  font-size: .89rem;
  line-height: 1.72;
  letter-spacing: -.012em;
}

@media (max-width: 1120px) and (min-width: 901px) {
  html[lang="en"] .mission-section .mission-copy-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  html[lang="en"] .mission-section .mission-copy-card h2 {
    font-size: .9rem;
    letter-spacing: -.04em;
  }

  html[lang="en"] .mission-section .mission-copy-card p {
    font-size: .8rem;
    line-height: 1.66;
  }
}

@media (max-width: 900px) {
  html[lang="en"] .mission-section .mission-copy-card h2,
  html[lang="en"] .mission-section .mission-copy-card p {
    min-height: 0;
  }

  html[lang="en"] .mission-section .mission-copy-card h2 {
    font-size: 1rem;
  }

  html[lang="en"] .mission-section .mission-copy-card p {
    font-size: .88rem;
  }
}