/* =============================================================================
   The Brand Clan - SECTOR PAGES
   The six "who we help" pages. Loaded after tbc-base.css and tbc-v4.css.
   Generated by scratchpad/build_sectors.py, so class names come from there.
   ========================================================================== */

/* ---- the pieces that suit this sector ----------------------------------- */
.v4 .sx-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);}
.v4 .sx-card{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(14px,1.8vw,22px);
  align-items:center;background:var(--paper-2);border:1px solid var(--rule-soft);
  padding:clamp(12px,1.4vw,16px);
  transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.v4 .sx-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.v4 .sx-card .im{display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid var(--rule-soft);padding:10px;aspect-ratio:1/1;}
.v4 .sx-card .im img{max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .6s cubic-bezier(.16,1,.3,1);}
.v4 .sx-card:hover .im img{transform:scale(1.05);}
.v4 .sx-card .rl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dp);margin-bottom:6px;}
.v4 .sx-card .nm{display:block;font-family:var(--display);font-size:clamp(17px,1.5vw,21px);
  color:var(--ink);line-height:1.18;}
.v4 .sx-card .pr{display:block;font-size:13.5px;color:var(--body);margin-top:6px;}
.v4 .sx-card .pr b{font-family:var(--display);font-size:17px;font-weight:400;color:var(--ink);}
@media(max-width:900px){ .v4 .sx-grid{grid-template-columns:1fr;} }
@media(max-width:420px){ .v4 .sx-card{grid-template-columns:96px minmax(0,1fr);} }

.v4 .sx-more{margin-top:clamp(20px,2.4vw,28px);}
/* The hit box was 23.9px, a hair under the WCAG 2.5.8 minimum. The space is
   added ABOVE the text and taken straight back off the margin, so the gold
   underline still hugs the words and nothing on the page moves. */
.v4 .sx-more a{display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--gold);padding-bottom:6px;padding-top:12px;margin-top:-12px;}
.v4 .sx-more a i{font-size:9px;color:var(--gold-dp);transition:transform .35s ease;}
.v4 .sx-more a:hover i{transform:translateX(5px);}

/* ---- worth knowing ------------------------------------------------------ */
.v4 .sx-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);border-top:1px solid var(--rule);padding-top:clamp(22px,2.6vw,32px);}
.v4 .sx-guide h3{font-size:20px;margin-bottom:9px;}
.v4 .sx-guide p{font-size:14.5px;line-height:1.6;}
@media(max-width:860px){ .v4 .sx-guide-grid{grid-template-columns:1fr;gap:24px;} }

/* ---- gallery: one large plate, four beside it --------------------------- */
.v4 .sx-gal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);}
.v4 .sx-gal-grid figure{margin:0;overflow:hidden;background:var(--ink);}
.v4 .sx-gal-grid figure:first-child{grid-column:span 2;grid-row:span 2;}
.v4 .sx-gal-grid img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;
  transition:transform .8s cubic-bezier(.16,1,.3,1);}
.v4 .sx-gal-grid figure:first-child img{aspect-ratio:1/1;}
.v4 .sx-gal-grid figure:hover img{transform:scale(1.04);}
@media(max-width:760px){
  .v4 .sx-gal-grid{grid-template-columns:1fr 1fr;}
  .v4 .sx-gal-grid figure:first-child{grid-column:span 2;grid-row:auto;}
  .v4 .sx-gal-grid figure:first-child img{aspect-ratio:3/2;}
}

/* ---- long form ---------------------------------------------------------- */
.v4 .sx-lf{max-width:74ch;}
.v4 .sx-lf-block{padding-top:clamp(22px,2.6vw,32px);}
.v4 .sx-lf-block + .sx-lf-block{border-top:1px solid var(--rule);margin-top:clamp(22px,2.6vw,32px);}
.v4 .sx-lf-block h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:12px;}
.v4 .sx-lf-block p{font-size:16px;line-height:1.68;margin-bottom:13px;}
.v4 .sx-lf-block p:last-child{margin-bottom:0;}

/* ---- FAQs --------------------------------------------------------------- */
.v4 .sx-faq{border-top:1px solid var(--rule);max-width:820px;
  margin-top:clamp(28px,3.4vw,44px);}
.v4 .sx-faq details{border-bottom:1px solid var(--rule);}
.v4 .sx-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  padding:17px 0;font-family:var(--display);font-size:clamp(17px,1.7vw,21px);color:var(--ink);
  list-style:none;
}
.v4 .sx-faq summary::-webkit-details-marker{display:none;}
.v4 .sx-faq summary i{font-size:12px;color:var(--gold-dp);transition:transform .3s ease;flex-shrink:0;}
.v4 .sx-faq details[open] summary i{transform:rotate(45deg);}
.v4 .sx-faq .ans{font-size:15px;line-height:1.62;padding:0 0 20px;}

/* ---- the kit shortcut --------------------------------------------------- */
.v4 .sx-kit-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,48px);align-items:center;}
.v4 .sx-kit-inner .eyebrow{display:block;margin-bottom:10px;}
.v4 .sx-kit-inner h2{font-size:clamp(24px,2.8vw,36px);line-height:1.12;margin-bottom:10px;}
.v4 .sx-kit-inner h2 em{color:var(--gold-dp);}
.v4 .sx-kit-inner p{font-size:15.5px;max-width:56ch;}
.v4 .sx-kit-meta{margin-top:12px;font-size:15px;color:var(--body);}
.v4 .sx-kit-meta b{font-family:var(--display);font-size:19px;font-weight:400;color:var(--ink);}
.v4 .sx-kit-ctas{display:flex;flex-direction:column;gap:11px;flex-shrink:0;}
@media(max-width:860px){
  .v4 .sx-kit-inner{grid-template-columns:1fr;}
  .v4 .sx-kit-ctas{flex-direction:row;flex-wrap:wrap;}
}

/* ---- closing call to action -------------------------------------------- */
.v4 .sx-cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,44px);align-items:center;
  padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--rule);}
.v4 .sx-cta-inner h2{font-size:clamp(24px,2.8vw,36px);margin-bottom:9px;}
.v4 .sx-cta-inner h2 em{color:var(--gold-dp);}
.v4 .sx-cta-inner p{font-size:15.5px;max-width:58ch;}
.v4 .sx-cta-btns{display:flex;gap:12px;flex-wrap:wrap;min-width:0;}
@media(max-width:760px){ .v4 .sx-cta-inner{grid-template-columns:1fr;} }

/* ---- other events we brand ----------------------------------------------
   Photo tiles with the name over them. These rules used to live in the kits
   stylesheet and were lost when that file was rewritten, which left the block
   as a stack of full-width images. */
.v4 .ok-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);}
.v4 .ok{position:relative;display:block;overflow:hidden;background:var(--ink);
  aspect-ratio:4/5;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.v4 .ok:hover{transform:translateY(-4px);}
.v4 .ok img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1);}
.v4 .ok:hover img{transform:scale(1.06);}
.v4 .ok .veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,15,20,.9) 12%,rgba(9,15,20,.35) 58%,rgba(9,15,20,.1));}
.v4 .ok .lbl{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  font-family:var(--display);font-size:clamp(15px,1.15vw,17px);color:#fff;line-height:1.2;}
.v4 .ok::after{content:"";position:absolute;left:14px;bottom:0;width:22px;height:2px;
  background:var(--gold);transition:width .45s cubic-bezier(.16,1,.3,1);}
.v4 .ok:hover::after{width:calc(100% - 28px);}
@media(max-width:1020px){ .v4 .ok-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:620px){ .v4 .ok-grid{grid-template-columns:1fr 1fr;} }