/* ===========================================================
   AtomicNorth — About and Contact page blocks
   Brand book only: Montserrat, red #CC0000, #92C4E0 / #D9EEFA,
   #F0F0F0 / #979797 / #666666 / #323232.
   =========================================================== */

/* ---------- values: six labelled principles ---------- */
.vals{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-soft) }
.vals li{ background:var(--ink-900); padding:38px 34px 42px }
.vals b{
  display:block; font-size:clamp(20px,2.1vw,26px); font-weight:800;
  letter-spacing:-.018em; color:#fff; line-height:1.15;
}
.vals span{
  display:block; margin-bottom:18px; width:34px; height:3px; background:var(--orange);
}
.vals i{
  display:block; margin-top:14px; font-style:normal;
  font-size:11px; font-weight:800; letter-spacing:.19em; text-transform:uppercase;
  color:var(--fg-faint);
}
@media(max-width:900px){ .vals{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:560px){ .vals{ grid-template-columns:1fr } }

/* ---------- leadership ---------- */
/* Five people, five columns: three across left a sixth cell empty, which with
   real photographs in the other five read as a missing person rather than as
   a layout. */
.people{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px }
@media(max-width:1240px){ .people{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px } }
@media(max-width:900px){ .people{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:560px){ .people{ grid-template-columns:1fr } }

/* ---------- client wall ---------- */
.clients{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:var(--line-soft) }
.clients li{
  background:var(--ink-850); min-height:104px; display:grid; place-items:center;
  padding:20px 16px; text-align:center;
}
.clients b{
  font-size:14.5px; font-weight:700; letter-spacing:.04em; color:var(--fg-mid);
  line-height:1.3;
}
.clients li:hover b{ color:#fff }
@media(max-width:1100px){ .clients{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media(max-width:700px){ .clients{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---------- offices ---------- */
.offices{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.office{
  background:var(--ink-850); border:1px solid var(--line); padding:30px 28px 32px;
  display:flex; flex-direction:column; gap:14px;
}
.office.is-hq{ border-color:var(--orange) }
.office .label{ color:var(--orange) }
.office h3{ font-size:21px; font-weight:800; letter-spacing:-.014em; color:#fff }
.office address{ font-style:normal; font-size:16px; line-height:1.6; color:var(--fg-mid) }
.office .out{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  font-size:14.5px; font-weight:700; color:#fff;
}
.office a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line) }
.office a:hover{ color:var(--blue-pale); border-color:var(--blue-pale) }
@media(max-width:1000px){ .offices{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:620px){ .offices{ grid-template-columns:1fr } }

/* ---------- direct contact strip ---------- */
.reach{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.reach div{ border-left:3px solid var(--orange); padding:6px 0 6px 20px }
.reach .label{ display:block; color:var(--fg-faint); margin-bottom:10px }
.reach a, .reach b{
  font-size:clamp(18px,1.9vw,23px); font-weight:800; letter-spacing:-.016em;
  color:#fff; text-decoration:none; line-height:1.2; display:block;
}
.reach a:hover{ color:var(--blue-pale) }
.reach p{ margin-top:10px; font-size:15px; color:var(--fg-dim) }
@media(max-width:820px){ .reach{ grid-template-columns:1fr; gap:28px } }

/* ---------- enquiry form ---------- */
.formwrap{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:64px; align-items:start }
@media(max-width:1000px){ .formwrap{ grid-template-columns:1fr; gap:40px } }

.fform{ display:grid; gap:22px }
.frow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px }
@media(max-width:620px){ .frow{ grid-template-columns:1fr } }
.field{ display:grid; gap:9px }
.field label{
  font-size:11.5px; font-weight:800; letter-spacing:.17em; text-transform:uppercase;
  color:var(--light-mid);
}
.field .req{ color:var(--orange) }
.field input, .field select, .field textarea{
  font-family:var(--font); font-size:16px; color:var(--light-fg);
  background:#fff; border:1px solid var(--light-line); border-radius:0;
  padding:14px 16px; width:100%;
}
.field textarea{ min-height:132px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--orange); outline-offset:-2px; border-color:var(--orange);
}
.field .hint{ font-size:13.5px; color:var(--light-mid) }

.choices{ display:flex; flex-wrap:wrap; gap:10px }
.choices label{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:1px solid var(--light-line); background:#fff; padding:11px 16px;
  font-size:14.5px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--light-fg);
}
.choices input{ width:auto; margin:0; accent-color:#CC0000 }
.choices label:has(input:checked){ border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange) }

.tickrow{ display:flex; align-items:center; gap:11px; font-size:15.5px; color:var(--light-fg) }
.tickrow input{ width:auto; accent-color:#CC0000 }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.note{
  margin-top:6px; padding:18px 20px; border-left:3px solid var(--orange);
  background:#fff; font-size:15px; color:var(--light-mid);
}
.note b{ color:var(--light-fg) }

.flash{ padding:20px 22px; border:1px solid var(--light-line); background:#fff; font-size:16px }
.flash.ok{ border-left:3px solid var(--orange) }
.flash.ok b{ display:block; margin-bottom:6px; font-size:18px; color:var(--light-fg) }
.flash.bad{ border-left:3px solid #CC0000; color:#8A0000 }
.flash ul{ margin-top:8px; display:grid; gap:4px; list-style:disc; padding-left:20px }

/* ---------- photographic hero (Contact) ----------
   The photo sits behind the headline with a hard left-to-right grade so the
   type keeps AA contrast over the bright sky on the right. */
.hero-photo{ background:#323438 }
.hero-photo .hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 62%;
  filter:saturate(.82) contrast(1.04) brightness(.92);
}
.hero-photo .hero-scrim{
  background:
    linear-gradient(100deg,
      rgba(43,45,49,.94) 0%,
      rgba(43,45,49,.88) 26%,
      rgba(43,45,49,.62) 52%,
      rgba(43,45,49,.34) 74%,
      rgba(43,45,49,.44) 100%),
    linear-gradient(to bottom, rgba(43,45,49,.55) 0%, rgba(43,45,49,0) 24%),
    linear-gradient(to top, rgba(43,45,49,.75) 0%, rgba(43,45,49,0) 34%);
}
/* red rule anchoring the photo to the brand */
.hero-photo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--orange); z-index:2;
}
.hero-cap{
  position:absolute; right:46px; bottom:26px; z-index:2;
  padding:9px 18px; background:rgba(43,45,49,.72);
  border-left:2px solid var(--orange);
  font-size:10.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--fg-mid);
}
@media(max-width:900px){ .hero-cap{ right:24px } }
@media(max-width:820px){
  .hero-photo .hero-img{ object-position:60% 60% }
  .hero-cap{ display:none }
}

/* ---------- leadership photo cards ----------
   Real headshots drop straight in: same filenames under assets/img/team/,
   any aspect ratio, object-fit crops them to the 4:5 frame. */
.person{
  background:var(--ink-850); border:1px solid var(--line);
  padding:0; margin:0; display:flex; flex-direction:column; align-items:stretch;
  overflow:hidden; position:relative;
}
.person img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  background:var(--ink-800);
  transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}

/* ---- motion on the photo frame ------------------------------------------
   A red hairline draws itself around the photograph, holds, and retracts:
   one pass per card, the five staggered across a nine-second cycle so at
   most one is moving at a time. That is the same rule the hero plates
   follow, one deliberate event rather than a permanent loop, and it is why
   this is a pair of pseudo-elements rather than a spinning gradient: the
   two horizontal edges sweep on ::before, the two vertical edges on
   ::after, both with background-size, which animates everywhere and
   degrades to nothing if it does not.

   Both are inset to the photo, not the card: left/right/top pinned and
   aspect-ratio 4/5 resolves the height from the width, so the frame tracks
   the image box exactly without a wrapper element in the markup. */
.person::before,
.person::after{
  content:""; position:absolute; left:0; right:0; top:0; aspect-ratio:4/5;
  z-index:2; pointer-events:none; background-repeat:no-repeat;
}
/* top edge only, drawn from the left. There is no bottom edge: the caption's
   3px red rule already sits exactly there, so the frame grows down from the
   top and lands on a line that is always present, rather than drawing a
   second red line on top of it. */
.person::before{
  background-image:linear-gradient(90deg,var(--orange),var(--orange));
  background-position:0 0;
  background-size:0 2px;
  animation:anFrameH 9s cubic-bezier(.33,0,.2,1) infinite;
}
/* right edge, drawn from the top; left edge, drawn from the bottom */
.person::after{
  background-image:linear-gradient(180deg,var(--orange),var(--orange)),
                   linear-gradient(180deg,var(--orange),var(--orange));
  background-position:100% 0, 0 100%;
  background-size:2px 0, 2px 0;
  animation:anFrameV 9s cubic-bezier(.33,0,.2,1) infinite;
}
@keyframes anFrameH{
  0%, 2%    { background-size:0 2px }
  22%, 52%  { background-size:100% 2px }
  74%, 100% { background-size:0 2px }
}
@keyframes anFrameV{
  0%, 8%    { background-size:2px 0, 2px 0 }
  30%, 52%  { background-size:2px 100%, 2px 100% }
  70%, 100% { background-size:2px 0, 2px 0 }
}
/* one card at a time */
.person:nth-child(2)::before,.person:nth-child(2)::after{ animation-delay:1.8s }
.person:nth-child(3)::before,.person:nth-child(3)::after{ animation-delay:3.6s }
.person:nth-child(4)::before,.person:nth-child(4)::after{ animation-delay:5.4s }
.person:nth-child(5)::before,.person:nth-child(5)::after{ animation-delay:7.2s }

/* Hover and keyboard focus answer immediately, and deliberately do not touch
   background-size: the animation already owns that property, so a transition
   on it would never run. The full frame comes from an outline on the same
   pseudo-element instead, pulled inside by a negative offset. */
.person:hover,
.person:focus-within{ border-color:var(--line-soft) }
.person:hover::before,
.person:focus-within::before{
  outline:2px solid var(--orange); outline-offset:-2px;
}
.person:hover img,
.person:focus-within img{ transform:scale(1.035) }

/* The cards are people, not decoration. If the reader has asked for less
   motion they get the frame with no movement at all. */
@media(prefers-reduced-motion:reduce){
  .person::before,.person::after{ animation:none }
  .person img{ transition:none }
  .person:hover img,.person:focus-within img{ transform:none }
}
/* the caption fills whatever height the tallest card sets, so five cards with
   titles of different lengths still end on the same line instead of leaving
   a ragged strip of empty card under the shorter ones */
.person figcaption{ flex:1 1 auto; padding:22px 24px 26px;
  border-top:3px solid var(--orange) }
.person h3{ font-size:19px; font-weight:800; letter-spacing:-.012em; color:#fff; line-height:1.2 }
.person p{
  margin-top:8px; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#D9EEFA; /* brand pale blue: 9.5:1 on the card; red was 1.9:1 */
}

/* ---------- testimonial grid (light section) ---------- */
.tstm{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.tstm figure{
  margin:0; background:#fff; border:1px solid var(--light-line);
  border-left:3px solid var(--orange); padding:30px 28px 26px;
  display:flex; flex-direction:column; gap:20px;
}
.tstm blockquote{
  margin:0; font-size:16.5px; line-height:1.58; color:var(--light-fg); font-style:italic;
}
.tstm figcaption{ margin-top:auto; padding-top:18px; border-top:1px solid var(--light-line) }
.tstm figcaption b{ display:block; font-size:15.5px; font-weight:800; color:var(--light-fg) }
.tstm figcaption span{
  display:block; margin-top:5px;
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--light-mid);
}
@media(max-width:1000px){ .tstm{ grid-template-columns:1fr } }

/* ---------- platform chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chips li{
  border:1px solid var(--line); background:var(--ink-850);
  padding:11px 18px; font-size:14px; font-weight:700; letter-spacing:.04em;
  color:var(--fg-mid);
}
.chips li:hover{ color:#fff; border-color:var(--fg-faint) }

/* four-up card grid, used where a page has four of something */
.deliv-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media(max-width:1100px){ .deliv-4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:620px){ .deliv, .deliv-4{ grid-template-columns:1fr } }

/* card titles that link through to a child page */
.dcard h4 a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:color .18s, border-color .18s;
}
.dcard h4 a:hover{ color:var(--blue-pale); border-color:var(--blue-pale) }
.dcard .out a{ color:var(--orange); text-decoration:none; font-weight:700 }
.dcard .out a:hover{ color:var(--blue-pale) }

/* ===========================================================================
   Insights: the editorial layout
   Service pages sell a mechanism, so they get a plate and a facts grid.
   An article has neither, so it gets a title block, a dateline and a reading
   column measured for prose rather than for scanning.
   =========================================================================== */

/* ---- title block ---- */
.hero-art{ min-height:auto; padding-block:0 }
.hero-art .hero-in{ padding-top:52px; padding-bottom:56px }
.art-head{ max-width:60ch }
.art-cat{ margin-top:20px; font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange) }
.hero-art h1{ margin-top:12px; font-size:clamp(30px,4.2vw,52px); line-height:1.1;
  letter-spacing:-.01em }
.hero-index h1{ font-size:clamp(34px,5vw,64px) }
.art-meta{ margin-top:22px; display:flex; flex-wrap:wrap; gap:9px; align-items:baseline;
  font-size:13px; color:var(--fg-dim) }
.art-meta .art-by{ color:var(--fg-mid); font-weight:700 }
.art-dot{ color:var(--line) }
.hero-art::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--orange) }

/* ---- the reading column ---- */
.art{ background:var(--ink-900) }
.art-shell{ padding-block:60px 8px }
.art-shell > *{ max-width:68ch; margin-left:0 }
/* .art-shell p is more specific than .art-lead, so the lead needs the same
   specificity or the generic paragraph colour wins and the lead looks dimmed */
.art-shell .art-lead{ font-size:clamp(17px,1.5vw,21px); line-height:1.62;
  color:var(--fg) }
.art-shell h2{ margin-top:46px; font-size:clamp(21px,2.2vw,27px); line-height:1.25;
  letter-spacing:-.005em }
.art-shell h2 + p{ margin-top:14px }
.art-shell p{ margin-top:17px; font-size:16.5px; line-height:1.72; color:var(--fg-mid) }
.art-shell a{ color:var(--blue-pale) }

/* ---- pull quote ---- */
.art-quote{ margin:38px 0 0; padding:2px 0 2px 22px; border-left:3px solid var(--orange) }
.art-quote p{ margin-top:0; font-size:clamp(18px,1.9vw,23px); line-height:1.45;
  font-weight:700; color:var(--fg) }

/* ---- figure strip. Source figures only, never a computed one. ---- */
.art-stats{ margin-top:34px; max-width:100%; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); background:var(--line) }
.art-stats > div{ padding:19px 20px; background:var(--ink-850) }
.art-stats b{ display:block; font-size:clamp(20px,2.4vw,28px); line-height:1.05;
  color:var(--orange) }
.art-stats span{ display:block; margin-top:8px; font-size:12.5px; line-height:1.45;
  color:var(--fg-dim) }

/* ---- embedded video ----------------------------------------------------- */
/* Wider than the 68ch reading column, because a 16:9 frame squeezed into a
   text measure is unwatchable. It overrides .art-shell > *'s max-width and
   sits on the same left edge as the prose. */
.art-media{ margin:38px 0 0; max-width:820px }
.art-embed{ position:relative; aspect-ratio:16/9; max-width:100%;
  background:var(--ink-850); border:1px solid var(--line-soft) }
.art-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0;
  display:block }

/* the facade. The thumbnail is a background, not an <img>, so a blocked
   i.ytimg.com leaves a styled dark panel rather than a broken-image icon. */
.art-play{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:6px; padding:22px 24px; text-align:left; cursor:pointer;
  border:0; background:var(--thumb) center/cover no-repeat, var(--ink-850);
  font:inherit; color:#fff;
}
.art-play::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.34) 0%,rgba(10,10,12,.86) 100%);
}
.art-play > *{ position:relative }
/* centred, because a play mark anywhere else is not read as a play mark */
.art-play-mark{
  position:absolute; left:50%; top:50%; width:66px; height:46px;
  transform:translate(-50%,-50%);
  background:var(--orange); border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .18s, background .18s;
}
.art-play-mark::after{
  content:""; position:absolute; left:26px; top:14px;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.art-play:hover .art-play-mark,.art-play:focus-visible .art-play-mark{
  transform:translate(-50%,-50%) scale(1.07); background:#E00000;
}
.art-play-t{ font-size:15px; font-weight:700; line-height:1.34; max-width:46ch }
.art-play-h{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
@media(max-width:560px){
  .art-play{ padding:14px 15px }
  .art-play-mark{ width:52px; height:36px }
  .art-play-mark::after{ left:20px; top:11px; border-width:7px 0 7px 12px }
  .art-play-t{ font-size:12.5px }
  .art-play-h{ font-size:9.5px }
}
.art-media figcaption{ margin-top:11px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-faint) }
@supports not (aspect-ratio:16/9){
  .art-embed{ height:0; padding-bottom:56.25% }
}

/* ---- named list ---- */
.art-list{ margin-top:32px; padding:0; list-style:none; counter-reset:al }
.art-list > li{ margin-top:26px; padding-left:46px; position:relative; counter-increment:al }
.art-list > li::before{ content:counter(al,decimal-leading-zero); position:absolute;
  left:0; top:1px; font-size:13px; font-weight:900; letter-spacing:.04em;
  color:var(--orange) }
.art-list h3{ font-size:16.5px; line-height:1.35 }
.art-list p{ margin-top:8px }

/* ---- byline foot ---- */
.art-foot{ margin-top:52px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  justify-content:space-between }
.art-byline{ margin-top:0; font-size:13.5px; color:var(--fg-dim) }
.art-byline b{ color:var(--fg-mid) }

/* ---- article cards, used by the index and by Related ---- */
/* Cards carry their own hairline rather than showing a grid background through
   1px gaps. With 14 articles in a four-column grid the bleed technique left the
   two unused cells painting a block of gap colour at the end of the last row. */
.post-grid{ margin-top:28px; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.post-grid-2{ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) }
.post{ display:block; padding:25px 25px 27px; background:var(--ink-850);
  border:1px solid var(--line-soft); text-decoration:none;
  transition:background .18s, border-color .18s }
.post:hover,.post:focus-visible{ background:var(--ink-800); border-color:var(--line) }
.post-cat{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange) }
.post h3{ margin-top:13px; font-size:18px; line-height:1.28; color:var(--fg) }
.post:hover h3{ color:#fff }
.post p{ margin-top:11px; font-size:13.5px; line-height:1.6; color:var(--fg-dim) }
.post-meta{ display:block; margin-top:16px; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; color:var(--fg-faint) }
.light .post{ background:#fff; border-color:#E0E0E0 }
.light .post:hover{ background:#FAFAFA; border-color:#C9C9C9 }
.light .post h3{ color:var(--ink-900) }
.light .post p{ color:#555 }
.light .post-meta{ color:#8A8A8A }
.sec-note{ margin-top:14px; max-width:60ch; font-size:13.5px; line-height:1.6;
  color:var(--fg-dim) }
.light .sec-note{ color:#5C5C5C }
.art-all{ margin-top:26px; font-size:13.5px; font-weight:700; letter-spacing:.04em }
.art-all a{ color:var(--orange); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px }

@media (max-width:640px){
  .art-shell{ padding-block:40px 8px }
  .art-shell h2{ margin-top:36px }
  .art-list > li{ padding-left:34px }
  .art-foot{ flex-direction:column; align-items:flex-start }
}

/* ---- newsroom: a dated release list, not a card grid. A journalist scans by
   date, so the date is the left column and carries the eye. ---- */
.press{ margin-top:8px; padding:0; list-style:none }
.press > li{ display:grid; gap:8px 34px; padding:26px 0;
  grid-template-columns:minmax(150px,190px) 1fr;
  border-top:1px solid var(--line-soft) }
.press > li:last-child{ border-bottom:1px solid var(--line-soft) }
.press-when time{ display:block; font-size:13.5px; font-weight:800;
  letter-spacing:.02em; color:var(--fg-mid) }
.press-kind{ display:block; margin-top:7px; font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange) }
.press-what h3{ font-size:clamp(18px,1.9vw,22px); line-height:1.28 }
.press-what h3 a{ color:var(--fg); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .18s }
.press-what h3 a:hover,.press-what h3 a:focus-visible{ border-color:var(--orange) }
.press-what p{ margin-top:11px; max-width:64ch; font-size:14.5px; line-height:1.62;
  color:var(--fg-dim) }
.press-meta{ display:block; margin-top:13px; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; color:var(--fg-faint) }
@media (max-width:640px){
  .press > li{ grid-template-columns:1fr; gap:12px }
  .press-kind{ display:inline-block; margin-top:0; margin-left:12px }
}

/* ---- statutory disclosures: a document table, not marketing ---- */
.hero-legal{ background:var(--ink-850) }
.legal .art-shell{ padding-block:52px 8px }
.legal-cite{ margin-top:16px; padding:18px 20px; background:var(--ink-850);
  border-left:3px solid var(--line); font-size:15px; line-height:1.66;
  color:var(--fg-mid) }
.legal-tbl{ margin-top:26px; width:100%; max-width:780px;
  border-collapse:collapse; font-size:15px }
.legal-tbl th,.legal-tbl td{ padding:15px 16px; text-align:left;
  border-bottom:1px solid var(--line-soft); vertical-align:middle }
.legal-tbl thead th{ padding-block:11px; font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
  border-bottom:1px solid var(--line) }
.legal-tbl tbody th{ font-weight:700; color:var(--fg); white-space:nowrap }
.legal-tbl td{ color:var(--fg-mid) }
.legal-dl{ display:inline-flex; align-items:baseline; gap:10px; font-weight:700;
  color:var(--orange); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px }
.legal-dl:hover,.legal-dl:focus-visible{ color:#fff; border-color:#fff }
.legal-kb{ font-size:11.5px; font-weight:700; letter-spacing:.05em;
  color:var(--fg-faint); border:0 }
/* An unavailable row must not look like a link. A dead link on a statutory
   page reads as a missing filing rather than a missing upload. */
.legal-none{ font-size:13px; color:var(--fg-faint); font-style:italic }
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
@media (max-width:520px){
  .legal-tbl{ font-size:14px }
  .legal-tbl th,.legal-tbl td{ padding:13px 10px }
}

/* ===========================================================
   Gallery: one page, one section per occasion
   =========================================================== */

.hero-gal .hero-in{ max-width:820px }

.gal-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  margin-bottom:30px; padding-bottom:22px; border-bottom:1px solid var(--line);
}
.gal-head h2{
  margin-top:10px;
  font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:-.02em;
  line-height:1.12; color:#fff;
}
.gal-head > div > p{ margin-top:12px; max-width:62ch; font-size:15.5px;
  line-height:1.62; color:var(--fg-dim) }
.gal-where{
  flex:none; max-width:24ch; text-align:right;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.7; color:var(--fg-faint);
}
.sec.light .gal-head{ border-bottom-color:var(--light-line) }
.sec.light .gal-head h2{ color:var(--light-fg) }
.sec.light .gal-head > div > p{ color:var(--light-mid) }
.sec.light .gal-where{ color:var(--light-mid) }
@media(max-width:760px){
  .gal-head{ flex-direction:column; align-items:flex-start; gap:16px }
  .gal-where{ text-align:left; max-width:none }
}

/* Justified rows, not masonry columns.
   Column masonry fills top-to-bottom, so a reader scanning left to right gets
   photographs 1, 4, 7, 10 across the first row: the order of an event album
   is the order the day ran, and column masonry destroys it. Here each tile's
   width is proportional to its own aspect ratio, which puts every tile in a
   row at the same height without cropping anything, and the tiles stay in
   document order. --arn (the ratio as a number) comes from the file's own
   dimensions, read when the page is requested. */
.gal-grid{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px;
  margin:0; padding:0; list-style:none;
}
/* flex-basis and flex-grow both scale with the ratio, which makes every width
   in a row a constant multiple of that tile's ratio and so every height in the
   row identical. A min-width breaks that: it clamped the portraits to 170px
   while the landscapes beside them were 327px, and the row came out 255px tall
   in places and 218px in others. So there is no min-width here; the basis
   multiplier sets the floor instead. */
.gal-item{
  --arn:1.5;
  flex:var(--arn) 1 calc(var(--arn) * 262px);
  min-width:0;
}
/* a zero-height spacer absorbs the last row's leftover width, so a final row
   of two does not stretch to the height of a row of four */
.gal-grid::after{ content:""; flex:999999 1 0; height:0; min-width:0 }
@media(max-width:900px){
  .gal-grid{ gap:12px }
  .gal-item{ flex-basis:calc(var(--arn) * 155px) }
}
@media(max-width:560px){
  /* one per row on a phone: two 170px tiles side by side show nothing */
  .gal-item{ flex:1 1 100% }
  .gal-grid::after{ display:none }
}

.gal-open{
  display:block; position:relative; width:100%; padding:0; border:0;
  background:var(--ink-850); cursor:zoom-in; overflow:hidden;
  font:inherit; color:inherit; text-align:left;
}
.gal-open img{
  display:block; width:100%; height:auto; aspect-ratio:var(--ar,3/2);
  transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}
/* the caption rides in from the bottom on hover, over a grade so it stays
   legible whatever the photograph underneath is doing */
.gal-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 16px 13px;
  background:linear-gradient(180deg,rgba(10,10,12,0) 0%,rgba(10,10,12,.88) 62%);
  font-size:12.5px; font-weight:600; line-height:1.4; color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
/* the frame, the same gesture as the leadership cards: it draws on approach
   rather than sitting there permanently */
.gal-open::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-repeat:no-repeat;
  background-image:linear-gradient(90deg,var(--orange),var(--orange)),
                   linear-gradient(180deg,var(--orange),var(--orange)),
                   linear-gradient(90deg,var(--orange),var(--orange)),
                   linear-gradient(180deg,var(--orange),var(--orange));
  background-position:0 0, 100% 0, 100% 100%, 0 100%;
  background-size:0 2px, 2px 0, 0 2px, 2px 0;
  transition:background-size .34s cubic-bezier(.4,0,.2,1);
}
.gal-open:hover::after,.gal-open:focus-visible::after{
  background-size:100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
.gal-open:hover img,.gal-open:focus-visible img{ transform:scale(1.045) }
.gal-open:hover .gal-cap,.gal-open:focus-visible .gal-cap{
  opacity:1; transform:translateY(0);
}
.gal-open:focus-visible{ outline:2px solid var(--blue-pale); outline-offset:3px }

.gal-count{
  margin-top:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-faint);
}
.sec.light .gal-count{ color:var(--light-mid) }

/* An empty album says where its folder is rather than disappearing, so it is
   obvious to whoever holds the photographs where they go. */
.gal-empty{
  border:1px dashed var(--line-soft); background:var(--ink-850);
  padding:26px 28px; max-width:74ch;
}
.gal-empty p{ font-size:15px; line-height:1.62; color:var(--fg-dim) }
.gal-empty b{ color:#fff }
/* the path is the useful part of this message, so it wraps rather than
   overflowing: "assets/img/gallery/festivals-and-celebrations/" is wider than
   a 390px screen and nowrap pushed the page sideways */
.gal-empty code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;
  color:var(--blue-pale); background:rgba(146,196,224,.10);
  padding:2px 6px; overflow-wrap:anywhere; word-break:break-word;
}
.sec.light .gal-empty{ border-color:var(--light-line); background:#fff }
.sec.light .gal-empty p{ color:var(--light-mid) }
.sec.light .gal-empty b{ color:var(--light-fg) }
.sec.light .gal-empty code{ color:#0A5E86; background:rgba(146,196,224,.22) }

/* ---- lightbox ----------------------------------------------------------
   No library. It is a dialog-shaped overlay driven by site.js: click or Enter
   to open, arrows to move, Escape to close, focus returned to the tile that
   opened it. */
.lbx{
  position:fixed; inset:0; z-index:120;
  display:grid; grid-template-columns:64px 1fr 64px;
  grid-template-areas:"bar bar bar" "prev fig next";
  grid-template-rows:auto 1fr;
  /* fully opaque, like the mega panel: any transparency at all and the page
     behind shows through, which on a page made of photographs means one
     photograph on top of another */
  background:#08080A;
  opacity:0; transition:opacity .22s ease;
}
.lbx.is-open{ opacity:1 }
.lbx-bar{
  grid-area:bar; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px 22px; border-bottom:1px solid rgba(255,255,255,.10);
}
.lbx-meta{
  display:flex; align-items:center; gap:14px;
  font-size:10.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
}
.lbx-album{ color:#fff }
.lbx-of{ color:var(--orange) }
.lbx-x{
  flex:none; width:40px; height:40px; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:#fff; font-size:24px; line-height:1; cursor:pointer;
  transition:background .18s, border-color .18s;
}
.lbx-x:hover,.lbx-x:focus-visible{ background:var(--orange); border-color:var(--orange) }
.lbx-nav{
  display:grid; place-items:center; border:0; background:transparent;
  color:rgba(255,255,255,.55); font-size:46px; line-height:1; cursor:pointer;
  transition:color .18s, background .18s;
}
.lbx-prev{ grid-area:prev }
.lbx-next{ grid-area:next }
.lbx-nav:hover,.lbx-nav:focus-visible{ color:#fff; background:rgba(255,255,255,.06) }
.lbx-fig{
  grid-area:fig; margin:0; min-width:0; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:18px 8px 26px;
}
.lbx-fig img{
  max-width:100%; max-height:calc(100vh - 190px); width:auto; height:auto;
  object-fit:contain; border:1px solid rgba(255,255,255,.14);
}
.lbx-fig figcaption{
  max-width:80ch; text-align:center;
  font-size:13.5px; line-height:1.55; color:rgba(235,241,248,.82);
}
@media(max-width:700px){
  /* one column, two rows. The arrows come out of the grid and sit over the
     bottom of the picture as thumb-sized targets: 64px gutters on a 390px
     screen would leave the photograph 260px wide. */
  .lbx{ grid-template-columns:1fr; grid-template-areas:"bar" "fig";
    grid-template-rows:auto 1fr }
  .lbx-bar{ padding:12px 14px }
  .lbx-meta{ flex-wrap:wrap; gap:4px 10px; font-size:9.5px; letter-spacing:.14em }
  .lbx-nav{ position:absolute; bottom:18px; width:54px; height:54px;
    font-size:34px; background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.16) }
  .lbx-prev{ left:14px }
  .lbx-next{ right:14px }
  .lbx-fig{ padding:14px 10px 92px }
  .lbx-fig img{ max-height:calc(100vh - 250px) }
  .lbx-fig figcaption{ font-size:12.5px }
}
body.lbx-lock{ overflow:hidden }

@media(prefers-reduced-motion:reduce){
  .gal-open img,.gal-cap,.gal-open::after,.lbx{ transition:none }
  .gal-open:hover img,.gal-open:focus-visible img{ transform:none }
  .gal-cap{ opacity:1; transform:none }
}

/* ---- legal pages: bulleted lists inside the article ----------------------- */
.art-shell .legal-list{ margin-top:14px; padding-left:20px; list-style:disc }
.art-shell .legal-list li{ margin-top:9px; font-size:16.5px; line-height:1.68; color:var(--fg-mid) }
.art-shell .legal-list li::marker{ color:var(--orange) }
.art-shell .legal-list b, .art-shell p b{ color:var(--fg) }
.legal .legal-tbl td{ vertical-align:top }
.legal-scroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
.legal-scroll .legal-tbl{ min-width:560px }