/* ==========================================================================
   WNORTH Core — header, mega menu and footer (WordPress)
   Brand: Instrument Serif (display) + Figtree (UI/body)
   ========================================================================== */

:root{
  --wn-green-900:#001F0D;   /* footer body                       */
  --wn-green-800:#0D311F;   /* header bar, footer bottom strip   */
  --wn-green-700:#183626;   /* mega menu panel                   */
  --wn-gold:#BD8F2D;
  --wn-coral:#E8805C;       /* conference accent                  */
  --wn-teal:#3F7369;        /* conference accent                  */
  --wn-spring:#28BF88;
  --wn-mint:#28BF88;
  --wn-white:#FFFFFF;

  --wn-grad-1:#3C3B4A;
  --wn-grad-2:#213D47;
  --wn-grad-3:#42685D;
  --wn-grad-4:#588662;
  --wn-grad-5:#8F964D;

  --wn-serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --wn-sans:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wn-container:1240px;
  --wn-gutter:24px;
  --wn-pad:max(var(--wn-gutter), calc((100% - var(--wn-container)) / 2));

  /* Every photo header on the site is this tall - the plugin's own heroes and
     the three-image bands on the Elementor pages - so the fold sits in the same
     place page to page. 30.6vw hits 440 at 1440 and ramps down from there. */
  --wn-hero-h:clamp(260px, 30.6vw, 440px);
  --wn-hero-scrim:linear-gradient(180deg, rgba(12,49,31,.34), rgba(12,49,31,.52));

  --wn-ease:cubic-bezier(.22,.61,.36,1);
  --wn-quote:url("../img/quote-mark.png"); /* the rounded mark the other pages use */
  --wn-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Cpath d='M1 5.5h14M10.5 1l4.5 4.5-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wn-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M1 5.6 5.2 9.8 14 1' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Scoped reset. :where() keeps these at zero specificity so component rules
   below still win, and nothing here can leak into Elementor page content. */
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page),:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) *{box-sizing:border-box}

.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page{
  font-family:var(--wn-sans);
  font-size:15px;
  line-height:1.5;
  color:var(--wn-white);
  -webkit-font-smoothing:antialiased;
}

:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(img){max-width:100%;display:block;height:auto}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(a){text-decoration:none;color:inherit;box-shadow:none}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(a:hover){text-decoration:none}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(ul,li){list-style:none;margin:0;padding:0}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(p,h1,h2,h3,h4){margin:0;padding:0}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(h1,h2,h3,h4){font-weight:400}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(button,[type="button"],[type="submit"]){font:inherit;color:inherit;background:none;border:0;cursor:pointer;box-shadow:none}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(input,form){margin:0}

/* Interactive states. Hello Elementor styles a:hover (0,1,1) and
   [type=button]:hover (0,2,0); these match or beat that and, loading after the
   theme, win the tie — while still losing to our own component rules. */
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(a):is(:link,:visited,:hover,:active,:focus){color:inherit;text-decoration:none}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(button,[type="button"],[type="submit"]):is(:hover,:focus,:active){background:none;color:inherit;border:0}
:where(.wn-announce,.wn-header,.wn-megas,.wn-utility,.wn-mobile,.wn-footer,.wn-speakers,.wn-posts,.wn-single,.wn-news,.wn-ps,.wn-psblock,.wn-cfblock,.wn-ps-modal,.wn-page) :is(a,button,input,[type="button"],[type="submit"]):focus-visible{
  outline:2px solid var(--wn-mint);outline-offset:3px;box-shadow:none;
}

/* The location filter's clear control. "All Locations" sits at the top of the
   menu, but once a city is chosen nobody goes looking for it there. */
.wn-ps__locclear{
  position:absolute;top:50%;right:-40px;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  color:var(--wn-green-800);background:transparent;
  transition:background-color .2s var(--wn-ease),color .2s var(--wn-ease);
}
.wn-ps__locclear[hidden]{display:none}
.wn-ps__locclear svg{width:13px;height:13px}
.wn-ps__locclear:is(:hover,:focus-visible){background:var(--wn-green-800);color:var(--wn-white)}

/* Hello Elementor's own "Skip to content" link keeps the theme's pink
   (reset.css sets a{color:#CC3366} and this link overrides nothing). It is
   off-screen until you tab into the page, then it is the first thing you see,
   on every page. */
.skip-link:not(#_),
.skip-link:not(#_):is(:link,:visited,:hover,:focus,:active){
  color:var(--wn-white);background:var(--wn-green-800);
}
.skip-link:not(#_):focus{outline:2px solid var(--wn-mint);outline-offset:2px}

.wn-container{
  width:100%;
  max-width:calc(var(--wn-container) + var(--wn-gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--wn-gutter);
}

/* --------------------------------------------------------------- buttons -- */
.wn-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--wn-sans);font-size:14px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;
  white-space:nowrap;
  transition:background-color .25s var(--wn-ease), color .25s var(--wn-ease), border-color .25s var(--wn-ease);
}
.wn-btn--gold{background:var(--wn-gold);color:var(--wn-white)}
.wn-btn--gold:hover,.wn-btn--gold:focus-visible{background:var(--wn-green-800);color:var(--wn-white)}
/* The header CTA sits in a tight row; it does not need the full button padding. */
.wn-header .wn-btn--gold{padding:12px 24px}
.wn-btn--outline{
  background:transparent;color:var(--wn-white);
  border:1px solid rgba(255,255,255,.85);
  padding:16px 34px;
}
.wn-btn--outline:hover,.wn-btn--outline:focus-visible{background:var(--wn-white);color:var(--wn-green-800)}

.wn-arrow{width:46px;height:10px;flex:none}

/* ------------------------------------------------------- announcement bar -- */
.wn-announce{background:var(--wn-gold);color:var(--wn-green-800)}
.wn-announce__link{
  display:flex;align-items:center;justify-content:center;gap:18px;
  min-height:44px;padding:10px var(--wn-gutter);
  font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;
  transition:opacity .2s var(--wn-ease);
}
.wn-announce__link:hover{opacity:.75}

/* ---------------------------------------------------------------- header -- */
/* ------------------------------------------------------- sticky chrome --
   Past the fold the announcement bar and the header lift out of the flow and
   ride along at a reduced height. The spacer takes the height they vacate, so
   the page does not jump at the moment they go fixed. */
.wn-chrome{position:relative;z-index:60}
.wn-chrome__spacer{display:none}

html.wn-stuck .wn-chrome{
  position:fixed;top:0;left:0;right:0;z-index:70;
  transform:translateY(-100%);
  transition:transform .34s var(--wn-ease);
  box-shadow:0 12px 30px rgba(12,49,31,.20);
}
html.wn-stuck.wn-stuck--in .wn-chrome{transform:translateY(0)}
html.wn-stuck .wn-chrome__spacer{display:block}

/* Signed in, WordPress pins its own bar over the top of the window. A fixed
   element at top:0 slides underneath it and loses the announcement message, so
   the sticky chrome starts below it instead. Under 601px WordPress lets its bar
   scroll away with the page, and top:0 is right again. */
@media screen and (min-width:601px){
  html.wn-stuck body.admin-bar .wn-chrome{top:32px}
}
@media screen and (min-width:601px) and (max-width:782px){
  html.wn-stuck body.admin-bar .wn-chrome{top:46px}
}

/* The condensed proportions from the mockup: the message bar keeps its height -
   it is already small - and the header comes down from 130px to 70 with a logo
   about two-thirds its full width. */
html.wn-stuck .wn-header__inner{min-height:70px}
html.wn-stuck .wn-logo img{width:178px}
html.wn-stuck .wn-header .wn-btn--gold{padding:11px 22px;font-size:13px}
html.wn-stuck .wn-nav__list{gap:26px}
.wn-logo img,
.wn-header__inner{transition:width .28s var(--wn-ease),min-height .28s var(--wn-ease)}

@media (prefers-reduced-motion:reduce){
  html.wn-stuck .wn-chrome{transition:none}
  .wn-logo img,.wn-header__inner{transition:none}
}

.wn-header{position:relative;z-index:60}
.wn-header__bar{background:var(--wn-green-800)}
.wn-header__inner{
  display:flex;align-items:center;gap:28px;
  min-height:130px;
}
.wn-logo img{width:264px;height:auto}

.wn-nav{margin-left:auto;margin-right:4px}
.wn-nav__list{display:flex;align-items:center;gap:30px}
.wn-nav__link{
  display:inline-block;position:relative;
  padding:10px 0;
  font-size:15px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;
  color:var(--wn-white);
  transition:color .22s var(--wn-ease);
}
.wn-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--wn-ease);
}
.wn-nav__item:hover .wn-nav__link,
.wn-nav__link:focus-visible,
.wn-nav__item.is-open .wn-nav__link{color:var(--wn-mint)}
.wn-nav__item:hover .wn-nav__link::after,
.wn-nav__link:focus-visible::after{transform:scaleX(1)}

.wn-burger{display:none;width:44px;height:44px;padding:10px;margin-left:auto}
.wn-burger span{display:block;height:2px;background:var(--wn-white);border-radius:2px;transition:transform .3s var(--wn-ease),opacity .2s var(--wn-ease)}
.wn-burger span+span{margin-top:6px}
.wn-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.wn-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.wn-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ------------------------------------------------------------- mega menu -- */
.wn-megas{position:absolute;inset-inline:0;top:100%;z-index:55}

.wn-mega{
  background:var(--wn-green-700);
  overflow:hidden;
}
.wn-mega[hidden]{display:none}
.wn-mega.is-open{animation:wn-mega-in .28s var(--wn-ease) both}
@keyframes wn-mega-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.wn-mega__inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:56px;
  padding:48px var(--wn-pad) 56px;
  align-items:start;
}
.wn-mega--feature .wn-mega__inner{
  grid-template-columns:auto minmax(0,1fr) minmax(380px,31%);
  padding-right:0;
  padding-block:0;
  align-items:stretch;
}

.wn-mega__title{
  margin:0;
  writing-mode:vertical-rl;
  text-orientation:sideways;
  font-family:var(--wn-serif);
  font-weight:400;font-size:62px;line-height:1;
  color:var(--wn-white);
  align-self:start;
  white-space:nowrap;
}
.wn-mega--feature .wn-mega__title{margin-top:48px;margin-bottom:56px}

/* cards ------------------------------------------------------------------ */
.wn-mega__cards{
  display:grid;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:40px 36px;
}
.wn-mega--feature .wn-mega__cards{padding:48px 56px 56px 0}

.wn-card{display:flex;flex-direction:column;gap:14px}
.wn-card__media{
  display:block;overflow:hidden;border-radius:16px;
  aspect-ratio:var(--ratio,4/3);
  background:rgba(255,255,255,.06);
}
.wn-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--wn-ease)}
.wn-card:hover .wn-card__media img,
.wn-card__media:hover img{transform:scale(1.05)}

/* The Leadership Summits card carries its own link, so its label is an <a>
   while every other card's is a <span>. The scoped a{color:inherit} reset at the
   top of this file outranks a single class, which is why that one label came out
   white; :not(#_) puts the gold back without touching the reset. */
.wn-card__label:not(#_){
  font-size:16px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--wn-gold);
  transition:color .22s var(--wn-ease);
}
.wn-card:hover .wn-card__label:not(#_),
.wn-card__label:not(#_):hover{color:var(--wn-mint)}
.wn-card__text{font-weight:450;font-size:15px;line-height:1.5;color:rgba(255,255,255,.88)}
.wn-card__meta{
  font-size:16px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;
  color:var(--wn-white);
}
.wn-card__more{color:var(--wn-white);display:inline-flex}
.wn-card--static{gap:14px}
.wn-card--static .wn-card__label{display:block}

/* leadership summits list */
.wn-summits{display:flex;flex-direction:column;gap:9px;margin-top:2px;overflow:visible}
.wn-summits a{display:flex;align-items:center;gap:12px;white-space:nowrap}
.wn-summits img{width:24px;height:16px;flex:none;object-fit:contain}
.wn-summits__city{
  font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--wn-white);
  transition:color .22s var(--wn-ease);
}
.wn-summits a:hover .wn-summits__city{color:var(--wn-mint)}
.wn-summits__date{font-size:14px;color:var(--wn-mint)}
/* Sept 15: the date used to sit beside the city and was cut off by the panel
   edge - the card is a fixed 213px column at every window size, so this is not a
   narrow-screen problem. The date now always takes its own line, indented past
   the flag so it lines up under the city. */
.wn-summits a{flex-wrap:wrap;align-items:flex-start;row-gap:1px}
/* the city keeps the flag's line and wraps within its own column - a long name
   like "London Delegation" used to drop underneath the flag */
.wn-summits img{margin-top:3px}
.wn-summits__city{flex:1 1 0;min-width:0;white-space:normal}
.wn-summits__date{flex:0 0 100%;padding-left:36px}

/* feature panel ---------------------------------------------------------- */
.wn-feature{
  position:relative;
  display:flex;align-items:center;
  background:var(--wn-green-700) center/cover no-repeat;
  min-height:100%;
}
.wn-feature--g1{background-image:url("../img/gradient-1.jpg")}
.wn-feature--g2{background-image:url("../img/gradient-2.jpg")}
.wn-feature__inner{padding:40px 100px 40px 58px}
.wn-feature__title{
  margin:0 0 18px;
  font-family:var(--wn-serif);font-weight:400;font-size:44px;line-height:1.12;
  color:var(--wn-white);
}
.wn-feature__text{margin:0 0 30px;font-weight:450;font-size:15px;line-height:1.5;color:rgba(255,255,255,.92)}

/* ----------------------------------------------------------- utility bar -- */
.wn-utility{
  position:relative;z-index:10;
  background:linear-gradient(90deg,
    var(--wn-grad-1) 0%, var(--wn-grad-2) 26%, var(--wn-grad-3) 52%,
    var(--wn-grad-4) 76%, var(--wn-grad-5) 100%);
}
.wn-utility__inner{
  display:flex;align-items:center;justify-content:flex-end;gap:18px;
  min-height:52px;
}
.wn-utility__links{display:flex;align-items:center;gap:28px;margin-right:10px}
.wn-utility__links a{
  font-size:15px;font-weight:600;color:var(--wn-white);
  transition:opacity .2s var(--wn-ease);
}
.wn-utility__links a:hover{opacity:.7}
.wn-utility__social{display:flex;align-items:center;gap:18px}
/* The three marks sit on one optical line: same box, no padding of their own,
   and the row gap is what separates them - see .wn-utility__inner above. */
.wn-utility__social svg,
.wn-searchbtn svg{display:block;flex:none;width:21px;height:21px;color:var(--wn-white)}
.wn-utility__social a,
.wn-searchbtn{
  display:flex;align-items:center;justify-content:center;
  width:21px;height:21px;padding:0;
  transition:opacity .2s var(--wn-ease);
}
.wn-utility__social a:hover,
.wn-searchbtn:hover{opacity:.7}
.wn-searchform{flex:0 1 240px}
.wn-searchform[hidden]{display:none}
.wn-searchform input{
  width:100%;padding:8px 16px;border:0;border-radius:999px;
  font:inherit;font-size:14px;color:var(--wn-green-800);background:rgba(255,255,255,.94);
}

/* --------------------------------------------------------- mobile drawer -- */
.wn-mobile{
  position:fixed;inset:0 0 0 auto;width:min(420px,100%);
  background:var(--wn-green-800);color:var(--wn-white);
  z-index:90;transform:translateX(100%);
  transition:transform .35s var(--wn-ease);
  overflow:hidden;
}
.wn-mobile[hidden]{display:none}
.wn-mobile.is-open{transform:none}
.wn-mobile__top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:88px;padding:0 20px 0 28px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.wn-mobile__top .wn-logo img{width:170px}
.wn-mobile__close{display:inline-flex;padding:10px}
.wn-mobile__close svg{width:26px;height:26px}
.wn-mobile__scroll{height:calc(100% - 88px);overflow-y:auto;padding:24px 28px 48px;-webkit-overflow-scrolling:touch}
.wn-acc__item{border-bottom:1px solid rgba(255,255,255,.14)}
.wn-acc__btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:18px 0;text-align:left;
  font-size:16px;letter-spacing:.09em;text-transform:uppercase;color:var(--wn-white);
}
.wn-acc__btn:not(.wn-acc__btn--plain)::after{
  content:"";width:9px;height:9px;flex:none;margin-left:16px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--wn-ease);
}
.wn-acc__btn[aria-expanded="true"]{color:var(--wn-mint)}
.wn-acc__btn[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.wn-acc__panel{display:none;padding:0 0 18px}
.wn-acc__panel.is-open{display:flex;flex-direction:column;gap:12px}
.wn-acc__panel a{font-size:15px;color:rgba(255,255,255,.88)}
.wn-acc__panel a:hover{color:var(--wn-mint)}
.wn-acc__cta{margin-top:8px;color:var(--wn-gold) !important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.wn-mobile__cta{margin-top:28px;width:100%}
.wn-mobile__util{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.wn-mobile__util a{font-size:15px;color:rgba(255,255,255,.7)}

.wn-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;opacity:0;transition:opacity .3s var(--wn-ease)}
.wn-scrim[hidden]{display:none}
.wn-scrim.is-open{opacity:1}
body.wn-locked{overflow:hidden}

/* ---------------------------------------------------------------- footer -- */
.wn-footer{position:relative;--wn-straddle:84px;padding-top:var(--wn-straddle)}
/* The green field starts below the straddle band, so the newsletter card can
   overhang whatever the page ends with — including nothing, on an empty page.
   Painting it as a layer rather than pulling the card above the footer keeps
   the card clear of the header no matter how short the page is. */
.wn-footer::before{content:"";position:absolute;inset:var(--wn-straddle) 0 0;background:var(--wn-green-900);z-index:0}
.wn-footer > *{position:relative;z-index:1}
/* With the newsletter card suppressed there is no overhang to reserve for. */
.wn-footer--flush{--wn-straddle:0}

.wn-newsletter{
  display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1fr);gap:40px 34px;align-items:center;
  background:var(--wn-gold);border-radius:28px;
  padding:54px 56px;
  margin-top:calc(var(--wn-straddle) * -1);
}
.wn-newsletter__title{
  margin:0;font-family:var(--wn-serif);font-weight:400;
  font-size:clamp(32px,3.3vw,46px);line-height:1.14;color:var(--wn-green-800);
}
.wn-newsletter__text{margin:0 0 22px;font-size:15px;line-height:1.45;color:var(--wn-green-800)}
.wn-subscribe{
  display:flex;align-items:center;gap:0;
  background:var(--wn-white);border-radius:999px;padding:6px 6px 6px 8px;
}
.wn-subscribe input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;
  /* Height rather than padding: an input's default line box makes it taller
     than the button beside it, which left white showing above and below. */
  height:41px;padding:0 18px;font:inherit;font-size:15px;font-weight:450;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--wn-green-800);
}
.wn-subscribe input::placeholder{color:#8a8a8a;text-transform:uppercase;letter-spacing:.08em}
.wn-subscribe input:focus{outline:none}
.wn-subscribe button{
  flex:none;background:var(--wn-green-800);color:var(--wn-white);
  border-radius:999px;padding:10px 34px;
  font-size:14px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  transition:background-color .25s var(--wn-ease);
}
.wn-subscribe button:hover{background:#123f28}
/* the placeholder does the visible labelling; this keeps a real label for
   screen readers without taking a slot in the pill */
.wn-subscribe__label{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.wn-footer__main{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,540px) repeat(3,minmax(0,1fr));gap:48px 56px;
  padding-top:76px;padding-bottom:80px;
}
.wn-logo--footer img{width:230px}
.wn-footer__about{margin:34px 0 0;max-width:372px;font-weight:450;font-size:15px;line-height:1.5;color:rgba(255,255,255,.9)}
.wn-footer__social{display:flex;gap:30px;margin-top:36px}
.wn-footer__social svg{width:28px;height:28px;color:var(--wn-white)}
.wn-footer__social a{display:inline-flex;transition:opacity .2s var(--wn-ease)}
.wn-footer__social a:hover{opacity:.65}

.wn-footer__heading{
  margin:0 0 20px;font-size:16px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--wn-gold);
}
.wn-footer__col li+li{margin-top:11px}
.wn-footer__col a{font-size:16px;color:var(--wn-white);transition:color .2s var(--wn-ease)}
.wn-footer__col a:hover{color:var(--wn-mint)}

.wn-footer__bottom{background:var(--wn-green-800)}
.wn-footer__bottominner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  min-height:58px;padding-block:14px;
}
.wn-footer__bottominner p{margin:0}
.wn-footer__bottominner,
.wn-footer__bottominner a{font-size:14px;color:rgba(255,255,255,.62)}
.wn-footer__bottominner ul{display:flex;gap:30px;flex-wrap:wrap}
.wn-footer__bottominner a:hover{color:var(--wn-white)}

/* ============================================================ responsive == */
@media (max-width:1280px){
  .wn-nav__list{gap:24px}
  .wn-nav__link{font-size:14px}
  .wn-logo img{width:200px}
  .wn-mega__title{font-size:54px}
}

@media (max-width:1100px){
  .wn-nav,.wn-header__cta{display:none}
  .wn-burger{display:block}
  .wn-header__inner{min-height:88px;gap:16px}
  .wn-utility__links li:first-child{display:none}
}

@media (max-width:1024px){
  .wn-footer__main{grid-template-columns:1fr 1fr;gap:48px}
  .wn-footer__brand{grid-column:1/-1}
  .wn-footer{--wn-straddle:70px}
  .wn-newsletter{grid-template-columns:1fr;padding:44px 40px}
}

@media (max-width:760px){
  .wn-announce__link{font-size:12px;letter-spacing:.1em;gap:12px}
  .wn-announce__link .wn-arrow{width:32px}
  .wn-utility__inner{justify-content:center;gap:18px;min-height:48px}
  .wn-utility__links{display:none}
  .wn-footer{--wn-straddle:56px}
  .wn-newsletter{padding:36px 26px;border-radius:22px}
  .wn-subscribe{flex-direction:column;background:transparent;padding:0;gap:12px;align-items:stretch}
  .wn-subscribe input{background:var(--wn-white);border-radius:999px;height:48px;padding:0 22px}
  .wn-subscribe button{width:100%;padding:14px 24px}
  .wn-footer__main{grid-template-columns:1fr;padding-top:64px;padding-bottom:56px}
  .wn-footer__brand{grid-column:auto}
  .wn-footer__bottominner{flex-direction:column;align-items:flex-start;gap:14px}
  .wn-footer__bottominner ul{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ==================================================== WordPress integration == */

/* Hello Elementor prints its own chrome; ours replaces it. */
.wnorth-chrome #site-header.site-header,
.wnorth-chrome #site-footer.site-footer{display:none !important}

/* Hello's page wrapper must not add space above our header. */
.wnorth-chrome .site-header + .site-main{margin-top:0}

/* Admin bar: keep the fixed drawer clear of it. */
.admin-bar .wn-mobile{top:32px}
@media screen and (max-width:782px){.admin-bar .wn-mobile{top:46px}}

/* ------------------------------------------------- Gravity Forms subscribe -- */
.wn-subscribe--gf{background:transparent;padding:0;display:block;border-radius:0}
.wn-subscribe--gf .gform_wrapper{margin:0}
.wn-subscribe--gf .gform_wrapper form{margin:0}
.wn-subscribe--gf .gform_wrapper .gform_fields{
  display:flex;align-items:center;gap:0;
  background:var(--wn-white);border-radius:999px;padding:6px 6px 6px 8px;
}
.wn-subscribe--gf .gform_wrapper .gfield{flex:1 1 auto;min-width:0;margin:0;padding:0}
.wn-subscribe--gf .gform_wrapper .gfield_label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.wn-subscribe--gf .gform_wrapper input[type=email],
.wn-subscribe--gf .gform_wrapper input[type=text]{
  width:100%;border:0;background:transparent;box-shadow:none;
  padding:14px 18px;font-family:var(--wn-sans);font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--wn-green-800);
}
.wn-subscribe--gf .gform_wrapper input:focus{outline:none;box-shadow:none}
.wn-subscribe--gf .gform_wrapper input::placeholder{color:#8a8a8a;text-transform:uppercase;letter-spacing:.08em}
.wn-subscribe--gf .gform_wrapper .gform_footer{
  margin:0;padding:0;position:absolute;right:6px;top:50%;transform:translateY(-50%);
}
.wn-subscribe--gf .gform_wrapper .gform_footer input[type=submit],
.wn-subscribe--gf .gform_wrapper .gform_button{
  background:var(--wn-green-800);color:var(--wn-white);border:0;border-radius:999px;
  padding:15px 34px;font-family:var(--wn-sans);font-size:14px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;cursor:pointer;
  transition:background-color .25s var(--wn-ease);
}
.wn-subscribe--gf .gform_wrapper .gform_footer input[type=submit]:hover{background:#123f28}
.wn-subscribe--gf .gform_wrapper .gform_body{position:relative}
.wn-subscribe--gf .gform_wrapper .validation_message,
.wn-subscribe--gf .gform_wrapper .gform_validation_errors{
  color:var(--wn-green-800);background:transparent;border:0;font-size:14px;margin-top:10px;
}
.wn-subscribe--gf .gform_confirmation_message{color:var(--wn-green-800);font-weight:600}

@media (max-width:760px){
  .wn-subscribe--gf .gform_wrapper .gform_fields{
    flex-direction:column;align-items:stretch;background:transparent;padding:0;gap:12px;
  }
  .wn-subscribe--gf .gform_wrapper input[type=email],
  .wn-subscribe--gf .gform_wrapper input[type=text]{background:var(--wn-white);border-radius:999px;padding:16px 22px}
  .wn-subscribe--gf .gform_wrapper .gform_footer{position:static;transform:none;margin-top:12px}
  .wn-subscribe--gf .gform_wrapper .gform_footer input[type=submit]{width:100%}
}


/* ================================================================ speakers == */
/* Sits inside page content, so it opts into the same reset but keeps dark text. */
.wn-speakers{color:var(--wn-green-800)}

.wn-speakers__filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.wn-speakers__chip{
  padding:9px 20px;border-radius:999px;
  border:1px solid rgba(13,49,31,.25);
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wn-green-800);
  transition:background-color .25s var(--wn-ease),color .25s var(--wn-ease),border-color .25s var(--wn-ease);
}
.wn-speakers__chip:hover{border-color:var(--wn-green-800)}
.wn-speakers__chip.is-active{background:var(--wn-green-800);border-color:var(--wn-green-800);color:var(--wn-white)}

.wn-speakers__grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:44px 32px;
}

.wn-speaker{display:flex;flex-direction:column;gap:10px}
.wn-speaker[hidden]{display:none}
.wn-speaker__media{
  display:block;overflow:hidden;border-radius:16px;
  aspect-ratio:4/5;background:rgba(13,49,31,.08);
}
.wn-speaker__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--wn-ease)}
.wn-speaker:hover .wn-speaker__media img{transform:scale(1.04)}
.wn-speaker__placeholder{display:block;width:100%;height:100%}

.wn-speaker__name{
  margin:6px 0 0;font-family:var(--wn-serif);font-weight:400;
  font-size:26px;line-height:1.15;color:var(--wn-green-800);
}
.wn-speaker__name a{transition:color .22s var(--wn-ease)}
.wn-speaker__name a:hover{color:var(--wn-gold)}
.wn-speaker__role{
  font-size:14px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--wn-gold);
}
.wn-speaker__company{font-size:16px;line-height:1.45;color:#3f5a4c}
.wn-speaker__linkedin{display:inline-flex;margin-top:2px;color:var(--wn-green-800);transition:color .22s var(--wn-ease)}
.wn-speaker__linkedin svg{width:22px;height:22px}
.wn-speaker__linkedin:hover{color:var(--wn-gold)}

.wn-speakers__empty{margin:8px 0 0;color:#3f5a4c}

@media (max-width:1024px){
  .wn-speakers__grid{grid-template-columns:repeat(min(var(--cols,4),3),minmax(0,1fr));gap:36px 26px}
}
@media (max-width:760px){
  .wn-speakers__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .wn-speaker__name{font-size:21px}
  .wn-speakers__filter{margin-bottom:26px}
}
@media (max-width:420px){
  .wn-speakers__grid{grid-template-columns:1fr}
}


/* =================================================================== posts == */
/* Type sizes, colours and spacing taken from the MEDIA mockup PDF metadata
   (design canvas 1400pt; scaled by 1440/1400 for a 1440px viewport). */
.wn-posts{color:var(--wn-green-800);background:var(--wn-white);padding:88px 0 121px}

.wn-posts__title{
  margin:0 0 76px;
  font-family:var(--wn-serif);font-style:italic;font-weight:400;
  font-size:clamp(44px,4.65vw,67px);line-height:1;
  color:var(--wn-green-800);
}

.wn-posts__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:57px 27px;
}

.wn-post{display:flex;flex-direction:column}
.wn-post__media{
  display:block;overflow:hidden;border-radius:16px;
  aspect-ratio:383/233;background:#CDCAC9;
}
.wn-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--wn-ease)}
.wn-post:hover .wn-post__media img{transform:scale(1.04)}
.wn-post__placeholder{display:block;width:100%;height:100%}

.wn-post__title{
  margin:27px 0 0;
  font-family:var(--wn-sans);font-weight:400;
  font-size:21px;line-height:1.28;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wn-gold);
}
.wn-post__title a{transition:color .22s var(--wn-ease)}
.wn-post__title a:hover{color:var(--wn-green-800)}

.wn-post__text{
  margin:15px 0 24px;
  font-weight:400;font-size:17px;line-height:1.42;letter-spacing:.01em;color:var(--wn-green-800);
  /* Real excerpts vary in length; the design shows four lines. Clamp so cards
     in a row stay level instead of stair-stepping. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}

.wn-post__more{
  display:inline-flex;align-items:center;gap:18px;
  margin-top:auto;align-self:flex-start;
  font-weight:400;font-size:18.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--wn-green-800);
}
.wn-post__more .wn-arrow{width:40px;transition:transform .3s var(--wn-ease)}
.wn-post__more:hover .wn-arrow{transform:translateX(6px)}

/* pagination -------------------------------------------------------------- */
.wn-posts__foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:103px;
}
.wn-pager ul{display:flex;align-items:center;gap:12px}
.wn-pager a,.wn-pager span{
  display:inline-flex;align-items:center;justify-content:center;
  width:41px;height:41px;border-radius:50%;
  background:#D3F2E7;color:var(--wn-green-800);
  font-weight:400;font-size:17px;line-height:1;
  transition:background-color .25s var(--wn-ease),color .25s var(--wn-ease);
}
.wn-pager a:hover{background:var(--wn-mint)}
.wn-pager .current,.wn-pager li.is-current span{background:var(--wn-green-800);color:var(--wn-white)}
.wn-pager .dots{background:transparent}

.wn-posts__count{
  font-weight:400;font-size:16px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--wn-green-800);
}
.wn-posts__empty{color:var(--wn-green-800)}

@media (max-width:1024px){
  .wn-posts{padding:72px 0 90px}
  .wn-posts__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
  .wn-posts__title{margin-bottom:52px}
  .wn-posts__foot{margin-top:72px}
  .wn-post__title{font-size:19px}
  .wn-post__text{font-size:16px}
}
@media (max-width:640px){
  .wn-posts{padding:56px 0 72px}
  .wn-posts__grid{grid-template-columns:1fr;gap:44px}
  .wn-post__title{font-size:18px}
  .wn-post__text{font-size:17px}
  .wn-post__more{font-size:16px}
  .wn-posts__foot{margin-top:52px;flex-direction:column;align-items:flex-start;gap:20px}
}


/* ============================================================= single post == */
.wn-single{color:var(--wn-green-800);background:var(--wn-white);padding:88px 0 0}

.wn-single__head{text-align:center;max-width:900px;margin-inline:auto}
.wn-single__eyebrow{
  font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--wn-gold);
}
.wn-single__eyebrow a{transition:color .22s var(--wn-ease)}
.wn-single__eyebrow a:hover{color:var(--wn-green-800)}

.wn-single__title{
  margin:22px 0 0;
  font-family:var(--wn-serif);font-weight:400;font-style:italic;
  font-size:clamp(34px,4.4vw,60px);line-height:1.08;color:var(--wn-green-800);
}
.wn-single__meta{
  margin:22px 0 0;
  font-weight:400;font-size:16px;letter-spacing:.09em;text-transform:uppercase;color:#3F5A4C;
}

.wn-single__media{margin:56px 0 0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#CDCAC9}
.wn-single__media img{width:100%;height:100%;object-fit:cover}

.wn-single__content{
  margin:56px 0 0;
  font-weight:450;font-size:18px;line-height:1.55;color:var(--wn-green-800);
}
/* Imported Elementor sections carry the old site's boxed widths; let them fill
   our container so the article lines up with the header, grid and footer. */
.wn-single__content .e-con,
.wn-single__content .e-con-inner{--container-max-width:100% !important;max-width:100% !important}
.wn-single__content > *:first-child{margin-top:0}
.wn-single__content p{margin:0 0 1.15em}
/* Every level is given a size. Imported bodies reach for whatever tag the old
   editor happened to use - one article marks an attribution line as an h6 -
   and an unstyled level falls through to the browser's default, which is how a
   heading ends up at 16px on one post and 34px on the next. */
.wn-single__content :is(h1,h2,h3,h4,h5,h6):not(#_){
  font-family:var(--wn-serif);font-weight:400;line-height:1.18;color:var(--wn-green-800);
  margin:1.6em 0 .5em;
}
.wn-single__content :is(h1,h2):not(#_){font-size:34px}
.wn-single__content h3:not(#_){font-size:28px}
.wn-single__content h4:not(#_){font-size:24px}
.wn-single__content h5:not(#_){font-size:21px}
.wn-single__content h6:not(#_){font-size:19px}
.wn-single__content img{border-radius:16px;height:auto}
.wn-single__content a{color:var(--wn-gold);text-decoration:underline;text-underline-offset:3px}
.wn-single__content a:hover{color:var(--wn-green-800)}
.wn-single__content ul,.wn-single__content ol{margin:0 0 1.15em;padding-left:1.3em;list-style:revert}
.wn-single__content li{margin:0 0 .4em;list-style:revert}
.wn-single__content :is(blockquote,.elementor-blockquote):not(#_){
  margin:1.6em 0;padding-left:26px;border-left:2px solid var(--wn-gold);
  font-style:italic;color:var(--wn-green-800);
}
.wn-single__content :is(blockquote,.elementor-blockquote) :is(p,.elementor-blockquote__content):not(#_){
  font-family:var(--wn-serif) !important;font-size:26px !important;
  font-weight:400 !important;line-height:1.3 !important;margin:0 0 .35em !important;
}
.wn-single__content :is(.elementor-blockquote__footer,.elementor-blockquote__author):not(#_),
.wn-single__content :is(blockquote,.elementor-blockquote) cite:not(#_){
  font-family:var(--wn-sans) !important;font-size:16px !important;
  font-weight:400 !important;font-style:normal;line-height:1.4 !important;
}

/* --- migrated content ------------------------------------------------------
   Bodies imported from the old site carry its Elementor styling: Playfair
   Display / Poppins, bespoke sizes and heavy container padding. !important is
   deliberate here — Elementor's per-element generated CSS is more specific
   than anything we can author, and this is a rebrand. */
.wn-single__content .elementor-heading-title,
.wn-single__content .elementor-widget-text-editor,
.wn-single__content .elementor-widget-container{
  font-family:var(--wn-serif) !important;
  color:var(--wn-green-800) !important;
}
.wn-single__content .elementor-widget-text-editor,
.wn-single__content .wn-was-heading{
  font-family:var(--wn-sans) !important;
  font-weight:400 !important;font-size:18px !important;line-height:1.55 !important;
  letter-spacing:normal !important;margin:0 0 1.15em !important;
}
/* the old design's container padding leaves large empty bands */
.wn-single__content .e-con,
.wn-single__content .e-con-inner,
.wn-single__content .elementor-element{--padding-block-start:0 !important;--padding-block-end:0 !important}
.wn-single__content .elementor-widget:not(:last-child){margin-block-end:0}

/* The old per-post Elementor stylesheets are dropped in PHP (see
   wnorth_drop_legacy_post_css), which fixes the headings and the spacing that
   hung off them. What survives that is the inline font-family / font-size the
   copy was pasted in with — Tahoma, Open Sans, 16px, 17px, 17.6px — and only
   !important reaches an inline style. `inherit` rather than a literal value, so
   every leaf resolves to whatever .wn-single__content sets, once. Quotes,
   captions and buttons keep their own sizes. */
.wn-single__content :is(p,li,td,span,font):not(#_):not(blockquote *):not(figcaption *):not(.elementor-button *):not(.elementor-blockquote *){
  font-family:inherit !important;font-size:inherit !important;letter-spacing:normal !important;
}
.wn-single__content :is(p,li,td):not(#_):not(blockquote *):not(.elementor-blockquote *){
  font-weight:400 !important;
}
.wn-single__content span:not(#_):not(blockquote *):not(.elementor-button *):not(.elementor-blockquote *){
  font-weight:inherit !important;
}
.wn-single__content :is(strong,b):not(#_){font-weight:600 !important}
.wn-single__content :is(h1,h2,h3,h4,h5,h6) :is(strong,b):not(#_){font-weight:inherit !important}
.wn-single__content :is(h1,h2,h3,h4,h5,h6):not(#_){
  font-family:var(--wn-serif) !important;font-weight:400 !important;
  letter-spacing:normal !important;color:var(--wn-green-800) !important;
}

/* related ----------------------------------------------------------------- */
.wn-single__related{margin-top:104px;padding-bottom:121px}
.wn-single__relatedtitle{
  margin:0 0 56px;text-align:center;
  font-family:var(--wn-serif);font-weight:400;font-style:italic;
  font-size:clamp(32px,3.4vw,48px);line-height:1;color:var(--wn-green-800);
}

@media (max-width:1024px){
  .wn-single{padding-top:64px}
  .wn-single__content{font-size:17px;margin-top:44px}
  .wn-single__media{margin-top:44px}
  .wn-single__related{margin-top:72px;padding-bottom:90px}
  .wn-single__relatedtitle{margin-bottom:40px}
}
@media (max-width:640px){
  .wn-single{padding-top:48px}
  .wn-single__content{font-size:16px}
  .wn-single__content :is(h1,h2):not(#_){font-size:26px}
  .wn-single__content h3:not(#_){font-size:22px}
  .wn-single__content h4:not(#_){font-size:20px}
  .wn-single__content :is(h5,h6):not(#_){font-size:18px}
  .wn-single__media{aspect-ratio:4/3;margin-top:32px}
  .wn-single__related{margin-top:56px;padding-bottom:72px}
}


/* ======================================================= newsletter sign-up == */
/* Metrics from the NEWSLETTER mockup PDF (1400pt canvas, scaled 1440/1400). */
.wn-news{color:var(--wn-green-800);background:var(--wn-white);padding:89px 0 0}

.wn-news__top{
  display:grid;grid-template-columns:minmax(0,1fr) 329px;column-gap:77px;align-items:start;
}

.wn-news__title{
  margin:0;
  font-family:var(--wn-serif);font-weight:400;
  font-size:clamp(40px,4.72vw,68px);line-height:1.03;color:var(--wn-green-800);
}
.wn-news__title em{font-style:italic;color:var(--wn-gold)}

.wn-news__intro{
  margin:39px 0 0;max-width:610px;
  font-weight:400;font-size:20.6px;line-height:1.3;color:var(--wn-green-800);
}

.wn-news__lists{
  margin:27px 0 0;
  display:grid;grid-template-columns:1.2fr 1fr;column-gap:36px;
}
.wn-news__list{display:flex;flex-direction:column}
.wn-news__list li{
  display:flex;align-items:baseline;gap:14px;
  font-weight:400;font-size:20.6px;line-height:1.4;color:var(--wn-green-800);
}
.wn-news__tick{
  width:19px;height:19px;flex:none;transform:translateY(3px);color:var(--wn-green-800);
}

.wn-news__media{
  margin:0;border-radius:16px;overflow:hidden;
  aspect-ratio:320/360;background:#CDCAC9;
}
.wn-news__media img{width:100%;height:100%;object-fit:cover}

/* The sign-up form is a third-party iframe carrying its own background.
   Running it full-bleed lets that background span the page, and giving the
   frame a min-height taller than its content lets the same background supply
   the breathing room below the card — so there is no colour to match and no
   seam. The provider already pads the top. Raise --wn-form-minheight if the
   form ever gains fields and sits tight to the bottom. */
.wn-news__band{margin-top:88px}
.wn-news__form{width:100%}
.wn-news__form .keap-custom-form{width:100%;display:block}
.wn-news__form iframe{
  width:100%;display:block;border:0;
  min-height:var(--wn-form-minheight,740px);
}
.wn-news__placeholder{
  max-width:720px;margin-inline:auto;
  padding:44px;text-align:center;border:1px dashed rgba(13,49,31,.3);border-radius:16px;
  color:#3F5A4C;
}
.wn-news__extra{max-width:780px;margin:56px auto 0;padding-bottom:120px;font-weight:450;font-size:17px;line-height:1.5}

@media (max-width:1024px){
  .wn-news{padding:64px 0 0}
  .wn-news__top{grid-template-columns:minmax(0,1fr) 260px;column-gap:44px}
  .wn-news__intro{font-size:18px;margin-top:28px}
  .wn-news__list li{font-size:18px}
  .wn-news__band{margin-top:64px}
}
@media (max-width:760px){
  .wn-news{padding:48px 0 0}
  .wn-news__top{grid-template-columns:1fr;row-gap:36px}
  .wn-news__media{order:-1;aspect-ratio:4/3}
  .wn-news__lists{grid-template-columns:1fr;row-gap:0}
  .wn-news__band{margin-top:48px}
  .wn-news__form iframe{min-height:var(--wn-form-minheight,820px)}
}


/* =============================================================== past speakers == */
/* Metrics from the PAST-SPEAKERS mockup PDF (1400pt canvas, scaled 1440/1400). */

.wn-ps{color:var(--wn-green-800);background:var(--wn-white)}

/* hero --------------------------------------------------------------------- */
.wn-ps__hero{position:relative;overflow:hidden}
.wn-ps__heroimgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:var(--wn-hero-h)}
.wn-ps__heroimg{display:block;overflow:hidden}
.wn-ps__heroimg img{width:100%;height:100%;object-fit:cover}
.wn-ps__hero::after{
  content:"";position:absolute;inset:0;
  background:var(--wn-hero-scrim);
  pointer-events:none;
}
.wn-ps__herotitle{
  position:absolute;left:0;right:0;bottom:0;top:0;
  display:flex;align-items:center;justify-content:center;
  margin:0;z-index:1;
  font-family:var(--wn-serif);font-weight:400;
  font-size:clamp(40px,6.7vw,96px);line-height:1;color:var(--wn-white);
  white-space:nowrap;
}
.wn-ps__herotitle em{font-style:italic}

/* filter bar ----------------------------------------------------------------- */
.wn-ps__filters{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:56px 0 48px;
}
.wn-ps__location{position:relative}
.wn-ps__locbtn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--wn-gold);color:var(--wn-white);border-radius:999px;
  padding:15px 26px;
  font-size:14px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}
.wn-ps__locbtn svg{width:13px;height:9px;transition:transform .25s var(--wn-ease)}
.wn-ps__locbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.wn-ps__locmenu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:20;min-width:220px;
  background:var(--wn-white);border-radius:14px;box-shadow:0 18px 40px rgba(13,49,31,.18);
  padding:8px;max-height:320px;overflow-y:auto;
}
.wn-ps__locmenu li{
  padding:11px 16px;border-radius:9px;cursor:pointer;
  font-size:15px;color:var(--wn-green-800);
  transition:background-color .18s var(--wn-ease);
}
.wn-ps__locmenu li:hover{background:rgba(13,49,31,.06)}
.wn-ps__locmenu li.is-active{background:var(--wn-green-800);color:var(--wn-white)}

.wn-ps__search{
  position:relative;flex:1 1 320px;min-width:240px;
  border:1px solid rgba(13,49,31,.28);border-radius:8px;
}
.wn-ps__searchinput{
  width:100%;border:0;background:transparent;
  padding:16px 54px 16px 26px;font:inherit;font-weight:400;font-size:18px;color:var(--wn-green-800);
}
.wn-ps__searchinput::placeholder{color:#9FA69E}
.wn-ps__searchinput:focus{outline:none}
.wn-ps__search svg{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--wn-green-800);pointer-events:none;
}

/* grid ------------------------------------------------------------------- */
.wn-psblock{--wn-ps-cols:4}
.wn-ps__grid{
  display:grid;grid-template-columns:repeat(var(--wn-ps-cols,4),minmax(0,1fr));
  column-gap:33px;row-gap:56px;
}
.wn-ps__card{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  background:none;border:0;padding:0;cursor:pointer;
  /* the card is a <button>; Hello's reset.css forces white-space:nowrap on
     buttons, which children inherit and long job titles then run off the card */
  white-space:normal;
}
.wn-ps__card[hidden]{display:none}
.wn-ps__photo{
  display:block;width:100%;overflow:hidden;border-radius:16px;
  aspect-ratio:276/331;background:#E5E5E5;
}
.wn-ps__photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:center var(--wn-ps-focal,22%);
  /* A framed speaker carries a zoom-and-slide in --wn-ps-frame. The hover
     lift uses the separate scale property so it composes with that transform
     instead of replacing it. */
  transform:var(--wn-ps-frame,none);
  transition:scale .5s var(--wn-ease);
}
.wn-ps__card:hover .wn-ps__photo img{scale:1.045}
/* width:100% — align-items:flex-start sizes these to max-content otherwise,
   so they overflow the column instead of wrapping inside it */
.wn-ps__name{
  margin-top:24px;width:100%;
  font-family:var(--wn-serif);font-style:italic;font-weight:400;
  font-size:29px;line-height:1.12;color:var(--wn-gold);
  transition:color .2s var(--wn-ease);
}
.wn-ps__card:hover .wn-ps__name{color:var(--wn-green-800)}
.wn-ps__role{margin-top:11px;width:100%;font-weight:450;font-size:15px;line-height:1.35;color:var(--wn-green-800)}

.wn-ps__foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:76px;padding-bottom:96px;
}
.wn-ps__empty{padding-bottom:96px;color:#3F5A4C}

/* about: team and ambassadors -------------------------------------------
   The same card and popup as the speaker grids, restyled to the About
   mockup: a circular portrait on the dark green field, name above role,
   both centred. The circle is capped rather than fluid so a four-across
   row and a five-across row read at the same weight. */
.wn-about-people{--wn-about-dot:200px}
.wn-about-people--sm{--wn-about-dot:162px}
/* Flex rather than grid, so a short last row centres under the one above it
   the way the mockup draws it - Iva and Bronwen sit in columns two and three,
   not hard left. The basis reproduces the grid's column width exactly. */
.wn-about-people .wn-ps__grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:var(--wn-about-gap,30px);row-gap:52px;
}
.wn-about-people .wn-ps__card{
  align-items:center;text-align:center;
  flex:0 0 calc((100% - (var(--wn-ps-cols,4) - 1) * var(--wn-about-gap,30px)) / var(--wn-ps-cols,4));
}
.wn-about-people .wn-ps__photo{
  width:100%;max-width:var(--wn-about-dot);aspect-ratio:1;
  border-radius:50%;background:rgba(255,255,255,.10);
}
.wn-about-people .wn-ps__name{
  margin-top:22px;
  font-family:var(--wn-sans);font-style:normal;font-weight:500;
  font-size:19px;line-height:1.24;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wn-gold);
}
.wn-about-people .wn-ps__card:hover .wn-ps__name{color:var(--wn-spring)}
.wn-about-people .wn-ps__role{margin-top:8px;font-size:16px;line-height:1.35;color:var(--wn-white)}
.wn-about-people--sm .wn-ps__name{margin-top:18px;font-size:15px;letter-spacing:.05em}
.wn-about-people--sm .wn-ps__role{margin-top:6px;font-size:14px;line-height:1.32}

/* A short row should sit under the start of the row above, not float in the
   middle of it - the mockup's last two team members line up left. */
@media (max-width:1100px){
  .wn-about-people{--wn-about-dot:170px}
  .wn-about-people--sm{--wn-about-dot:140px}
}
@media (max-width:900px){
  .wn-about-people{--wn-ps-cols:3;--wn-about-gap:22px}
  .wn-about-people .wn-ps__grid{row-gap:40px}
}
@media (max-width:640px){
  .wn-about-people{--wn-ps-cols:2;--wn-about-gap:18px;--wn-about-dot:150px}
  .wn-about-people--sm{--wn-about-dot:130px}
  .wn-about-people .wn-ps__grid{row-gap:34px}
  .wn-about-people .wn-ps__name{font-size:16px}
  .wn-about-people--sm .wn-ps__name{font-size:14px}
}

/* the social row beside "Connect with WNORTH" on the confirmation pages ---
   Larger than the footer's, and in spring rather than white, because it sits
   on the page rather than in the chrome. */
.wn-social-lg{
  display:flex;align-items:center;gap:44px;
  margin:34px 0 0;padding:0;list-style:none;
}
.wn-social-lg li{margin:0}
.wn-social-lg a{display:block;color:var(--wn-spring);transition:opacity .2s var(--wn-ease)}
.wn-social-lg a:hover{opacity:.65}
.wn-social-lg svg{width:34px;height:34px;display:block}
@media (max-width:640px){
  .wn-social-lg{gap:30px}
  .wn-social-lg svg{width:28px;height:28px}
}

/* about: the film --------------------------------------------------------
   Elementor draws the player edge to edge; the mockup gives it the same
   softened corner the photographs carry. */
.wn-el-film .elementor-wrapper{border-radius:18px;overflow:hidden;background:#E5E5E5}

/* about: as featured in ---------------------------------------------------
   Every mark is sized by its own cap height rather than a shared box, so a
   wide wordmark and a tall roundel carry the same weight along the row. */
.wn-featured{
  /* a bare <ul> inside an Elementor shortcode widget sits outside the plugin's
     own reset, so the browser's 40px list indent applies - which both offsets
     the row and pushes the sixth mark onto a second line */
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  /* the mockup spreads the six marks across the whole content column rather
     than clustering them left, so the spacing is the leftover width */
  justify-content:space-between;
  column-gap:28px;row-gap:30px;
}
.wn-featured__item{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.wn-featured__item img{width:auto;max-width:100%;display:block}

/* about: the emblem beside the brand story ------------------------------- */
/* id-weight: Elementor's own `.elementor img{max-width:100%}` was letting the
   emblem fill its column, which set the section's height by itself */
/* Sept 15: a fixed width, not 100%. The widget's column is centre-aligned, so it
   shrinks to its content - and content asking for 100% of a shrink-to-fit box
   resolves to 0, which also stops the lazy loader ever fetching the file. */
.wn-brandmark:not(#_){width:250px;max-width:100%;height:auto;margin-inline:auto;display:block}
@media (max-width:900px){
  .wn-brandmark:not(#_){width:200px}
  .wn-featured{justify-content:flex-start;column-gap:clamp(24px,4vw,40px)}
  /* below the full row the measured heights are too large to fit six across,
     so every mark falls back to a cap height and the boxes keep their lead */
  .wn-featured__item img{height:auto!important;max-height:36px}
  .wn-featured__item:nth-child(2) img{max-height:76px}
  .wn-featured__item:nth-child(5) img{max-height:27px}
}

/* speaker cards as a carousel -----------------------------------------------
   [wnorth_speaker_cards layout="carousel"]: the same cards in one scrolling row,
   snapping card by card, with arrows under it at the outer edges. */
.wn-ps__grid.wn-ps__grid--carousel{
  --wn-car-cols:var(--wn-ps-cols,4);
  display:grid;grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--wn-car-cols) - 1) * 33px) / var(--wn-car-cols));
  column-gap:33px;row-gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;
}
.wn-ps__grid--carousel::-webkit-scrollbar{display:none}
.wn-ps__grid--carousel > .wn-ps__card{scroll-snap-align:start}
.wn-ps__carnav{display:flex;justify-content:space-between;margin-top:26px}
.wn-ps__carbtn{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:34px;
  background:none;border:0;padding:0;color:var(--wn-green-800);cursor:pointer;
  transition:opacity .2s var(--wn-ease);
}
.wn-ps__carbtn svg{width:34px;height:14px}
.wn-ps__carbtn[aria-disabled="true"]{opacity:.3;cursor:default}
@media (max-width:1100px){.wn-ps__grid.wn-ps__grid--carousel{--wn-car-cols:3}}
@media (max-width:640px){.wn-ps__grid.wn-ps__grid--carousel{--wn-car-cols:2;column-gap:18px;grid-auto-columns:calc((100% - 18px) / 2)}}

/* CTA band ----------------------------------------------------------------- */
.wn-ps__cta{background:var(--wn-green-800);color:var(--wn-white);padding:96px 0}
/* the footer reserves a transparent band for the straddling newsletter card;
   tint it so it reads as one green field under this page's green CTA */
.page-template-wnorth-past-speakers .wn-footer{background:var(--wn-green-800)}
.wn-ps__ctainner{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:64px;align-items:center}
.wn-ps__ctatitle{
  margin:0;font-family:var(--wn-serif);font-weight:400;
  font-size:clamp(38px,4.8vw,68px);line-height:1;color:var(--wn-white);
}
.wn-ps__ctatitle em{font-style:italic;color:var(--wn-gold)}
.wn-ps__ctasub{
  margin:26px 0 0;font-weight:400;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--wn-white);
}
.wn-ps__ctatext{margin:18px 0 30px;max-width:560px;font-weight:450;font-size:15px;line-height:1.45;color:rgba(255,255,255,.92)}
.wn-ps__ctamedia{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:356/331}
.wn-ps__ctamedia img{width:100%;height:100%;object-fit:cover}

@media (max-width:1100px){
  .wn-ps__grid{grid-template-columns:repeat(min(var(--wn-ps-cols,4),3),minmax(0,1fr));column-gap:26px;row-gap:44px}
  .wn-ps__ctainner{grid-template-columns:1fr;gap:36px}
  .wn-ps__ctamedia{order:-1;aspect-ratio:16/9}
}
@media (max-width:760px){
  .wn-ps__herotitle{font-size:clamp(32px,11vw,48px)}
  .wn-ps__filters{padding:36px 0 32px;flex-direction:column;align-items:stretch}
  .wn-ps__search{flex:0 0 auto}
  .wn-ps__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:32px}
  .wn-ps__name{font-size:22px}
  .wn-ps__cta{padding:64px 0}
}
@media (max-width:460px){
  .wn-ps__grid{grid-template-columns:1fr;max-width:280px;margin-inline:auto}
}

/* popup ---------------------------------------------------------------------- */
.wn-ps-modal{position:fixed;inset:0;z-index:200}
.wn-ps-modal[hidden]{display:none}
.wn-ps-modal__scrim{
  position:absolute;inset:0;background:rgba(13,49,31,.72);
  opacity:0;transition:opacity .25s var(--wn-ease);
}
.wn-ps-modal.is-open .wn-ps-modal__scrim{opacity:1}
.wn-ps-modal__card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-46%);opacity:0;
  transition:opacity .25s var(--wn-ease),transform .3s var(--wn-ease);
  width:min(920px,92vw);max-height:88vh;overflow-y:auto;
  background:var(--wn-white);border-radius:20px;
  display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;
  padding:48px;color:var(--wn-green-800);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.wn-ps-modal.is-open .wn-ps-modal__card{opacity:1;transform:translate(-50%,-50%)}
.wn-ps-modal__close{
  position:absolute;top:22px;right:22px;padding:8px;color:var(--wn-green-800);
  transition:opacity .2s var(--wn-ease);
}
.wn-ps-modal__close:hover{opacity:.6}
.wn-ps-modal__close svg{width:22px;height:22px}
.wn-ps-modal__photo{
  display:block;border-radius:50%;overflow:hidden;
  width:280px;height:280px;background:#E5E5E5;flex:none;
}
.wn-ps-modal__photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:center var(--wn-ps-focal,22%);
  transform:var(--wn-ps-frame,none);
}
.wn-ps-modal__name{
  margin:0;font-family:var(--wn-serif);font-style:italic;font-weight:400;
  font-size:44px;line-height:1.08;color:var(--wn-gold);
}
.wn-ps-modal__role{margin:14px 0 0;font-weight:600;font-size:16px;line-height:1.4;color:var(--wn-green-800)}
.wn-ps-modal__bio{margin:22px 0 0;font-weight:450;font-size:16.5px;line-height:1.5;color:var(--wn-green-800)}
.wn-ps-modal__bio p{margin:0 0 1em}
.wn-ps-modal__bio p:last-child{margin-bottom:0}
.wn-ps-modal__linkedin{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  font-weight:600;font-size:16px;color:var(--wn-green-800);
}
.wn-ps-modal__linkedin svg{width:24px;height:24px;color:var(--wn-green-800)}
/* the class sets display, which outranks the browser's [hidden] rule, so the
   icon showed on speakers with no LinkedIn URL */
.wn-ps-modal__linkedin[hidden]{display:none}

@media (max-width:700px){
  .wn-ps-modal__card{grid-template-columns:1fr;padding:36px 28px;text-align:center}
  .wn-ps-modal__photo{width:180px;height:180px;margin-inline:auto}
  .wn-ps-modal__linkedin{justify-content:center}
}


/* ================================================================ page hero == */
/* Same treatment as the Past Speakers hero, one image instead of three. */

.wn-page{color:var(--wn-green-800);background:var(--wn-white)}

.wn-page__hero{position:relative;overflow:hidden}
.wn-page__heroimg{display:block;overflow:hidden;height:var(--wn-hero-h)}
/* Sept 15: 22% suited the portrait this hero shipped with and showed only the
   ceiling of a landscape photo. The middle is the safer default, and each page
   can set its own point under Hero image in the editor. */
.wn-page__heroimg img{width:100%;height:100%;object-fit:cover;object-position:center var(--wn-hero-focal,50%)}
.wn-page__hero::after{
  content:"";position:absolute;inset:0;
  background:var(--wn-hero-scrim);
  pointer-events:none;
}
.wn-page__herotitle{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0 24px;z-index:1;text-align:center;
  font-family:var(--wn-serif);font-weight:400;font-style:italic;
  font-size:clamp(34px,5.4vw,76px);line-height:1.05;color:var(--wn-white);
}

/* Editorial content, so the component reset above has to be undone here:
   margins, list markers and link underlines all come back. */
.wn-page__body{
  width:100%;
  max-width:calc(var(--wn-container) + var(--wn-gutter) * 2);
  margin-inline:auto;padding:56px var(--wn-gutter) 96px;
  color:var(--wn-green-800);
  font-weight:450;font-size:18px;line-height:1.6;
}
.wn-page__body > .elementor{margin:0}
.wn-page__body h2,.wn-page__body h3,.wn-page__body h4{
  font-family:var(--wn-serif);font-weight:400;color:var(--wn-green-800);
}
.wn-page__body h2{font-size:32px;line-height:1.2;margin:48px 0 14px}
.wn-page__body h3{font-size:24px;line-height:1.25;margin:36px 0 12px}
.wn-page__body h4{font-size:22px;line-height:1.3;margin:34px 0 10px}
.wn-page__body h2:first-child,.wn-page__body h3:first-child{margin-top:0}
.wn-page__body p{margin:0 0 1.15em}
.wn-page__body ul,.wn-page__body ol{margin:0 0 1.3em;padding-left:1.4em;list-style:disc}
.wn-page__body ol{list-style:decimal}
.wn-page__body li{margin:0 0 .5em;list-style:inherit}
.wn-page__body li:last-child{margin-bottom:0}
.wn-page__body strong,.wn-page__body b{font-weight:600}
.wn-page__body a{color:var(--wn-gold);text-decoration:underline}
.wn-page__body a:hover{color:var(--wn-green-800)}

/* Terms and Privacy come out of a Word outline, so every numbered section
   heading arrives as a one-item <ol start="N"> with the prose following as
   sibling paragraphs - there is not a single <h2> on either page, and the
   headings render at body size. Style that shape as the heading it is, keeping
   the number. A genuine numbered list has more than one item and is untouched. */
.wn-page__body ol:has(> li:only-child):not(#_){
  margin:48px 0 14px;padding-left:0;list-style-position:inside;
}
.wn-page__body ol:has(> li:only-child) > li:not(#_){
  margin:0;
  font-family:var(--wn-serif);font-weight:400;font-size:32px;line-height:1.2;
  color:var(--wn-green-800);
}
.wn-page__body ol:has(> li:only-child) > li::marker{
  font-family:var(--wn-serif);font-weight:400;font-size:32px;
  color:var(--wn-green-800);
}
.wn-page__body > *:first-child,
.wn-page__body .e-con-inner > *:first-child,
.wn-page__body ol:has(> li:only-child):first-child{margin-top:0}

@media (max-width:760px){
  .wn-page__body ol:has(> li:only-child):not(#_){margin:36px 0 12px}
  .wn-page__body ol:has(> li:only-child) > li:not(#_),
  .wn-page__body ol:has(> li:only-child) > li::marker{font-size:26px}
}

@media (max-width:760px){
  .wn-page__herotitle{font-size:clamp(28px,9vw,42px)}
  .wn-page__body{padding:48px 0 64px}
}

/* =================================================================== connect == */
/* Metrics from the CONNECT mockup (1400pt canvas, 1200pt content column).
   Deliberately NOT added to the component reset at the top of this file: the
   page body holds a Gravity Form, and that reset flattens ul/li and margins. */

.wn-connect{
  box-sizing:border-box;
  font-family:var(--wn-sans);color:var(--wn-green-800);background:var(--wn-white);
  -webkit-font-smoothing:antialiased;
}
.wn-connect *,.wn-connect *::before,.wn-connect *::after{box-sizing:border-box}
.wn-connect img{max-width:100%;display:block;height:auto}

/* intro ---------------------------------------------------------------- */
.wn-connect__intro{padding:96px 0 104px}
.wn-connect__introinner{
  display:grid;grid-template-columns:minmax(0,557fr) minmax(0,590fr);
  column-gap:54px;align-items:start;
}
.wn-connect__arch{margin:0;overflow:hidden;aspect-ratio:557/555;background:#E5E5E5;
  /* oversized top radii collapse to exactly half the width: a true arch */
  border-radius:999px 999px 0 0;
}
.wn-connect__arch img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}

.wn-connect__title{
  margin:0;font-family:var(--wn-serif);font-weight:400;
  font-size:clamp(40px,4.85vw,68px);line-height:1.05;color:var(--wn-green-800);
}
.wn-connect__title em{font-style:italic;color:var(--wn-gold)}

.wn-connect__lede{margin-top:22px}
.wn-connect__lede p{margin:0 0 1em;font-weight:400;font-size:20px;line-height:1.35;color:var(--wn-green-800)}
.wn-connect__lede p:last-child{margin-bottom:0}

.wn-connect__form{margin-top:36px}

/* Gravity Forms wears its own theme; pull it onto the brand ------------- */
.wn-connect__form .gform_wrapper{margin:0}
.wn-connect__form .gform_heading{display:none}
.wn-connect__form .gform_fields{row-gap:22px!important;column-gap:20px!important}
.wn-connect__form .gfield_label{
  display:block;margin:0 0 8px;
  font-family:var(--wn-sans);font-weight:600;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--wn-green-800);
}
.wn-connect__form .gfield_required{color:var(--wn-gold);margin-left:4px}
.wn-connect__form .gfield_required .gfield_required_text{font-size:12px;font-style:normal}

.wn-connect__form input[type=text],
.wn-connect__form input[type=email],
.wn-connect__form input[type=tel],
.wn-connect__form input[type=url],
.wn-connect__form input[type=number],
.wn-connect__form select,
.wn-connect__form textarea{
  width:100%;
  font-family:var(--wn-sans);font-weight:400;font-size:16px;line-height:1.4;
  color:var(--wn-green-800);background:var(--wn-white);
  border:1px solid rgba(13,49,31,.28);border-radius:8px;
  padding:14px 18px;
  transition:border-color .2s var(--wn-ease),box-shadow .2s var(--wn-ease);
}
.wn-connect__form textarea{min-height:150px;resize:vertical}
.wn-connect__form input::placeholder,
.wn-connect__form textarea::placeholder{color:#9FA69E}
.wn-connect__form :is(input,select,textarea):focus{
  outline:none;border-color:var(--wn-gold);box-shadow:0 0 0 3px rgba(190,144,45,.16);
}
.wn-connect__form .gfield_description{
  margin-top:6px;font-size:13px;font-weight:400;color:#6C7B72;
}
/* "0 of 600 max characters" - kept in the DOM for screen readers, hidden visually */
.wn-connect__form :is(.charleft,.ginput_counter){
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.wn-connect__form .gfield_validation_message,
.wn-connect__form .validation_message{
  margin-top:6px;padding:0;border:0;background:none;
  font-size:13px;color:#B23A48;
}
.wn-connect__form .gform_validation_errors{
  border:1px solid rgba(178,58,72,.4);border-radius:8px;background:#FCF3F4;
  padding:14px 18px;margin:0 0 24px;color:#B23A48;box-shadow:none;
}
.wn-connect__form .gform_validation_errors h2{font-size:15px;margin:0;color:#B23A48}

.wn-connect__form .gform_footer{margin:28px 0 0;padding:0}
.wn-connect__form .gform_footer :is(input[type=submit],button){
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--wn-sans);font-size:14px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:15px 34px;border:0;border-radius:999px;cursor:pointer;
  background:var(--wn-green-800);color:var(--wn-white);
  transition:background-color .25s var(--wn-ease);
}
.wn-connect__form .gform_footer :is(input[type=submit],button):hover{background:var(--wn-gold)}
.wn-connect__form .gform_confirmation_message{
  font-weight:400;font-size:18px;line-height:1.6;color:var(--wn-green-800);
}

.wn-connect__social{
  display:flex;align-items:center;gap:30px;
  margin:40px 0 0;padding:0;list-style:none;
}
.wn-connect__social li{margin:0}
.wn-connect__social a{display:block;color:var(--wn-green-800);transition:opacity .2s var(--wn-ease)}
.wn-connect__social a:hover{opacity:.6}
.wn-connect__social svg{width:26px;height:26px;display:block}

/* call for speakers ------------------------------------------------------ */
/* The band carries a fine grain over the flat green, matched to the mockup:
   noise at about +/-2 levels of luminance, on a 240px tile whose mean is
   exactly --wn-green-800 and whose edges wrap, so it repeats without a seam.
   The colour is baked into the tile rather than blended, which keeps it exact.

   ::before is the gradient that closes the form above it - full-bleed and in
   the same spectrum as the utility bar, as the mockup has it. */
.wn-connect__cta,
#hp-stats,
#hp-impact,
#nys-counter,
#ls-events,
#ld-events,
#nys-events{
  position:relative;
  background:var(--wn-green-800) url("../img/green-noise.png") repeat top left;
  background-size:240px 240px;
}
.wn-connect__cta{color:var(--wn-white);padding:92px 0 96px}

.wn-connect__cta::before,
#nys-counter::before,
#ld-events::before{
  content:"";position:absolute;top:0;left:0;right:0;height:10px;
  background:linear-gradient(90deg,
    var(--wn-grad-5) 0%, var(--wn-grad-1) 22%, var(--wn-grad-2) 44%,
    var(--wn-grad-3) 66%, var(--wn-grad-4) 84%, var(--wn-grad-5) 100%);
}
.wn-connect__ctainner{
  display:grid;grid-template-columns:minmax(0,640fr) minmax(0,481fr);
  column-gap:64px;align-items:center;
}
.wn-connect__ctatitle{
  margin:0;font-family:var(--wn-serif);font-weight:400;
  font-size:clamp(38px,4.85vw,68px);line-height:1.05;color:var(--wn-white);
}
.wn-connect__ctatitle em{font-style:italic;color:var(--wn-gold)}
.wn-connect__ctasub{
  margin:30px 0 0;font-weight:400;font-size:26px;line-height:1.25;
  letter-spacing:.02em;text-transform:uppercase;color:var(--wn-white);
}
.wn-connect__ctatext{margin:16px 0 0;max-width:640px;font-weight:400;font-size:20px;line-height:1.3;color:var(--wn-white)}
.wn-connect__ctanote{margin:22px 0 0;font-weight:600;font-size:20px;line-height:1.3;color:var(--wn-gold)}
.wn-connect__ctamedia{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:481/331;background:#0b2a1c}
.wn-connect__ctamedia img{width:100%;height:100%;object-fit:cover}
.wn-connect + .wn-footer{background:var(--wn-green-800)}

@media (max-width:1000px){
  .wn-connect__introinner{grid-template-columns:1fr;row-gap:44px}
  .wn-connect__arch{max-width:480px;margin-inline:auto}
  .wn-connect__ctainner{grid-template-columns:1fr;row-gap:36px}
  .wn-connect__ctamedia{order:-1;aspect-ratio:16/9}
}
@media (max-width:760px){
  .wn-connect__intro{padding:56px 0 64px}
  .wn-connect__lede p{font-size:18px}
  .wn-connect__ctasub{font-size:21px}
  .wn-connect__ctatext,.wn-connect__ctanote{font-size:18px}
  .wn-connect__cta{padding:64px 0}
  .wn-connect__social{gap:24px;margin-top:40px}
}

/* ====================================== elementor helpers (London Summit) == */
/* Applied via the Elementor "CSS Classes" field. Elementor's image widget has
   no aspect-ratio control, and its logos need height-based sizing because the
   lockups have wildly different aspect ratios. */

/* The class is doubled on purpose: Elementor's frontend.css carries
   `.elementor img{border-radius:0}` at the same specificity and loads later,
   which silently flattened every rounded image. */
/* A portrait cropped to a circle loses the top of the head if the crop holds
   the middle - these files are 2:3 and the face sits in the upper third. */
.wn-el-circle.wn-el-circle img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  object-position:center 15%;
}
.wn-el-square.wn-el-square img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}
.wn-el-wide.wn-el-wide img{width:100%;aspect-ratio:383/237;object-fit:cover;border-radius:12px}

/* full-bleed photo strips - image widgets rather than container backgrounds,
   because Elementor's background lazy-load rule blanks those */
.wn-el-strip.wn-el-strip img{width:100%;height:var(--wn-hero-h);object-fit:cover;display:block}
.wn-el-logo img{width:auto;max-width:100%}

/* vertical LEADERSHIP SUMMIT lettering beside the intro copy */
.wn-el-vertical{pointer-events:none}
.wn-el-vertical img{width:auto;max-height:780px}

@media (max-width:1024px){
  .wn-el-vertical{display:none}
}

/* ------------------------------------- speaker photos inside Elementor ---- */
/* Elementor's frontend.css sets `.elementor img{height:auto}`, which cancels
   the height:100% the cards rely on, so headshots sat short with the card
   background showing beneath. Higher specificity, same crop behaviour. */
.wn-psblock .wn-ps__photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:center var(--wn-ps-focal,22%);
}

/* ------------------------------------------- London Summit carousels ------ */
/* Elementor's Media Carousel has no slide-height control, and its radius
   setting misses the slide element, so both are done here. */

.wn-carousel-1 .elementor-carousel-image{
  height:356px;border-radius:12px;background-size:cover;background-position:center;
}
/* Carousel 1 runs with arrows on the NY Summit and with dots on the London
   Summit. Elementor only prints bullets when pagination is on, so keying the
   reveal off their presence lets one class serve both. */
.wn-carousel-1 .swiper-pagination{display:none}
.wn-carousel-1 .swiper-pagination:has(.swiper-pagination-bullet){
  display:block;position:absolute;bottom:0;margin:0;height:auto;
}
.wn-carousel-1:has(.swiper-pagination-bullet) .elementor-main-swiper:not(#_){
  height:auto;padding-bottom:46px;
}
.wn-carousel-1 .swiper-pagination-bullet{
  width:11px;height:11px;margin:0 7px;opacity:1;
  background:transparent;border:1px solid var(--wn-green-800);
}
.wn-carousel-1 .swiper-pagination-bullet-active{background:var(--wn-green-800)}

/* arrows sit under the strip at the outer edges, as in the mockup */
/* Elementor's per-page CSS sets top:50% and a translate on these, and wins
   different halves of the fight on different pages - the arrows ended up at
   three different heights across the site. The id-weight makes this the last
   word so they sit below the strip everywhere. */
.wn-carousel-1 .elementor-swiper-button:not(#_){
  top:auto;bottom:-2px;transform:none;height:auto;
  color:var(--wn-green-800);opacity:1;
}
.wn-carousel-1 .elementor-swiper-button svg{width:34px;height:14px}
/* Sept 15: closer under the slides, and in line with the content column rather
   than hard against the page edge */
.wn-carousel-1 .elementor-swiper-button-prev:not(#_){left:max(24px,calc(50% - 620px))}
.wn-carousel-1 .elementor-swiper-button-next:not(#_){right:max(24px,calc(50% - 620px))}
.wn-carousel-1 .elementor-main-swiper{padding-bottom:0}
/* where the next section starts straight under the slider, the arrows sit
   close beneath the slides instead of hanging into it */
.wn-carousel-1--tight .elementor-swiper-button:not(#_){bottom:-38px}

.wn-carousel-2 .elementor-carousel-image{
  height:506px;background-size:cover;background-position:center;
}
/* The dots have to live in the swiper's bottom padding, not in its flow:
   .elementor-main-swiper clips at overflow:hidden, so a static pagination
   after a full-height slide falls outside the box and is never seen.
   height:auto releases the widget's own height setting, which would
   otherwise eat the padding and clip the slide instead. */
.wn-carousel-2 .elementor-main-swiper:not(#_){height:auto;padding-bottom:46px}
.wn-carousel-2 .swiper-pagination:not(#_){position:absolute;bottom:0;margin:0;height:auto}
.wn-carousel-2 .swiper-pagination-bullet{
  width:11px;height:11px;margin:0 7px;opacity:1;
  background:transparent;border:1px solid var(--wn-green-800);
}
.wn-carousel-2 .swiper-pagination-bullet-active{background:var(--wn-green-800)}

/* London Summit, Sept 10. The first carousel hangs over the counter band, so
   its dots land on dark green - green dots there disappear. */
.wn-carousel-1--ondark .swiper-pagination-bullet{border-color:var(--wn-gold)}
.wn-carousel-1--ondark .swiper-pagination-bullet-active{background:var(--wn-gold)}

/* The flag hero, rebuilt with the fade pulled back so the maple leaf and the
   Union Jack read at the edges. */
#ls-hero:not(#_){background-image:url("../img/ls-hero-flags.webp")}

/* What to Expect: three columns sharing the row edge to edge, so the right
   photograph ends where the agenda links do. */
#ls-expect:not(#_) > .e-con{flex:1 1 0;min-width:0}
@media (max-width:767px){
  #ls-expect:not(#_) > .e-con{flex:1 1 100%}
}

@media (max-width:1024px){
  .wn-carousel-1 .elementor-carousel-image{height:260px}
  .wn-carousel-2 .elementor-carousel-image{height:340px}
}
@media (max-width:760px){
  .wn-carousel-1 .elementor-carousel-image{height:220px}
  .wn-carousel-2 .elementor-carousel-image{height:260px}
}

/* -------------------------------- two-tone headings inside Elementor ------ */
/* The <em> half is gold in every heading except the hero, where the mockup
   keeps both words white - hence a class rather than a blanket rule. */
.wn-el-dual em{color:var(--wn-gold);font-style:italic}

/* agenda links are white in the mockup; without this they take the theme's
   link colour and render pink */
.wn-el-agenda a{color:var(--wn-white);text-decoration:none}
.wn-el-agenda a:hover{color:var(--wn-gold)}

/* ============================================ testimonial carousel layout == */
/* Elementor nests the <cite> INSIDE __content (not in __footer, which holds only
   the image), so the attribution is reordered with flex order rather than grid
   placement. The wrapper class is doubled because Elementor's image_left layout
   sets display:flex at the same specificity and loads later. */

.elementor-widget-testimonial-carousel .elementor-testimonial.elementor-testimonial{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  column-gap:44px;
  align-items:center;text-align:left;
}
.elementor-widget-testimonial-carousel .elementor-testimonial__footer{display:contents}

/* explicit rows: the image follows the content in the DOM, so auto-placement
   would otherwise drop it onto a second row */
.elementor-widget-testimonial-carousel .elementor-testimonial__image{
  grid-column:1;grid-row:1;align-self:center;margin:0;
  width:300px;height:300px;
}
.elementor-widget-testimonial-carousel .elementor-testimonial__image img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}

.elementor-widget-testimonial-carousel .elementor-testimonial__content{
  grid-column:2;grid-row:1;
  display:flex;flex-direction:column;margin:0;text-align:left;
}
.elementor-widget-testimonial-carousel .elementor-testimonial__cite{
  order:-1;position:relative;
  padding-left:88px;text-align:left;font-style:normal;
}
/* the mockup's quote mark, lifted from the PDF: the font glyph only renders
   about a quarter of its em box, so matching the 61x53pt artwork by font-size
   alone was never going to be reliable */
.elementor-widget-testimonial-carousel .elementor-testimonial__cite::before{
  content:"";position:absolute;left:0;top:2px;
  width:63px;height:55px;
  background:url("../img/quote-mark.png") no-repeat left top;
  background-size:contain;
}
.elementor-widget-testimonial-carousel .elementor-testimonial__name,
.elementor-widget-testimonial-carousel .elementor-testimonial__title{display:block}
.elementor-widget-testimonial-carousel .elementor-testimonial__text{
  text-align:left;margin-top:16px;
}

@media (max-width:1024px){
  .elementor-widget-testimonial-carousel .elementor-testimonial.elementor-testimonial{
    grid-template-columns:220px minmax(0,1fr);column-gap:30px;
  }
  .elementor-widget-testimonial-carousel .elementor-testimonial__image{width:220px;height:220px}
  .elementor-widget-testimonial-carousel .elementor-testimonial__cite{padding-left:70px}
  .elementor-widget-testimonial-carousel .elementor-testimonial__cite::before{width:48px;height:42px;top:0}
}
@media (max-width:760px){
  .elementor-widget-testimonial-carousel .elementor-testimonial.elementor-testimonial{
    grid-template-columns:minmax(0,1fr);row-gap:22px;justify-items:center;
  }
  .elementor-widget-testimonial-carousel .elementor-testimonial__image{
    grid-column:1;grid-row:1;width:180px;height:180px;
  }
  .elementor-widget-testimonial-carousel .elementor-testimonial__content{grid-column:1;grid-row:2}
  .elementor-widget-testimonial-carousel .elementor-testimonial__cite{
    padding-left:0;padding-top:56px;text-align:center;
  }
  .elementor-widget-testimonial-carousel .elementor-testimonial__cite::before{
    left:50%;transform:translateX(-50%);top:0;width:44px;height:38px;
  }
  .elementor-widget-testimonial-carousel .elementor-testimonial__text{text-align:center}
}

/* ============================================== conference speaker cards == */
/* Cutout portrait on a solid panel, name and role across the top. Accent
   colour and portrait framing both arrive as inline custom properties, so the
   run of colours and each speaker's crop stay data, not stylesheet. */

.wn-cfblock{--wn-cf-cols:5}
.wn-cf__grid{
  display:grid;grid-template-columns:repeat(var(--wn-cf-cols,5),minmax(0,1fr));
  gap:0;
}
.wn-cf__card{
  /* a <button> centres its content box; without flex the name floats mid-card */
  position:relative;display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-start;overflow:hidden;
  aspect-ratio:240/430;
  padding:12px 12px 0;border:0;cursor:pointer;text-align:left;
  /* Hello's reset.css sets button{white-space:nowrap}, which is inherited by
     the children: without this a long job title runs off the card. */
  white-space:normal;
  background:var(--wn-cf-bg,#BE902D);color:var(--wn-cf-ink,#0C311F);
  font-family:var(--wn-sans);
}
.wn-cf__meta{position:relative;z-index:2;display:block;width:100%;pointer-events:none}
.wn-cf__name{
  display:block;font-size:21px;font-weight:600;line-height:1.15;
  letter-spacing:.02em;text-transform:uppercase;color:inherit;
}
.wn-cf__role{display:block;margin-top:4px;font-size:17px;font-weight:400;line-height:1.2;color:inherit}

/* The portrait is placed by the three percentages the card carries inline, so
   the subject fills the card width and stands on its floor whatever padding the
   source file happens to have. Class doubled to beat .elementor img. */
.wn-cf__cutout.wn-cf__cutout{
  position:absolute;z-index:1;
  width:var(--wn-cf-w,100%);max-width:none;height:auto;
  left:var(--wn-cf-l,0%);bottom:var(--wn-cf-b,0%);
  transform-origin:bottom center;transition:transform .45s var(--wn-ease);
}
.wn-cf__card:hover .wn-cf__cutout{transform:scale(1.04)}
/* a full photograph (no cutout): fills the card below the name, top-anchored so
   the face is never cropped */
.wn-cf__cutout.wn-cf__cutout--photo:not(#_){
  width:100%;left:0;bottom:0;height:76%;object-fit:cover;object-position:50% 12%;
}
.wn-cf__card--white{box-shadow:inset 0 0 0 1px rgba(12,49,31,.08)}

/* The column count arrives as an inline custom property on .wn-cfblock, and an
   inline style beats a stylesheet rule - so these have to set the columns
   themselves rather than redefine the variable. min() keeps a shortcode that
   asked for fewer columns from being widened. */
@media (max-width:1200px){
  .wn-cf__grid{grid-template-columns:repeat(min(var(--wn-cf-cols,5),4),minmax(0,1fr))}
}
@media (max-width:900px){
  .wn-cf__grid{grid-template-columns:repeat(min(var(--wn-cf-cols,5),3),minmax(0,1fr))}
  .wn-cf__name{font-size:19px}.wn-cf__role{font-size:16px}
}
@media (max-width:620px){
  .wn-cf__grid{grid-template-columns:repeat(min(var(--wn-cf-cols,5),2),minmax(0,1fr))}
  .wn-cf__card{padding:10px 10px 0}
  .wn-cf__name{font-size:15px}.wn-cf__role{font-size:12.5px}
}

/* popup, conference variant: round portrait on the card's own accent colour */
.wn-ps-modal.is-conference .wn-ps-modal__photo{
  background:var(--wn-modal-accent,#BE902D);
  border-radius:50%;overflow:hidden;
}
.wn-ps-modal.is-conference .wn-ps-modal__photo img{
  border-radius:50%;object-fit:cover;
}
.wn-ps-modal.is-conference .wn-ps-modal__linkedin svg{
  width:26px;height:26px;padding:4px;border-radius:5px;
  background:var(--wn-green-800);color:var(--wn-white);
}

/* -------------------------------------- conference page helper classes ---- */
/* Not every two-tone heading goes gold: some keep one colour and only change
   to italic, and the hero pair uses coral. */
.wn-el-italic em{font-style:italic;color:inherit}
.wn-el-coral em{font-style:italic;color:var(--wn-coral)}
.wn-el-mint em{font-style:italic;color:var(--wn-spring)}

/* partner logos: even optical height regardless of each file's aspect ratio */
/* .wn-el-partner sizing now lives with the Elementor overrides at the end. */

/* ------------------------------------------------- conference hero band --- */
/* Three photos across with the title laid over them, rather than pulling the
   next section up with a negative margin. */
/* Targeted by ID, not class: Elementor applies _css_classes to widgets but
   drops them on containers, so the container needs an element ID instead. */
#cf-hero,
#ab-hero,
#ty-hero,
#wl-hero{position:relative}
#cf-hero-over,
#ab-hero-over,
#ty-hero-over,
#wl-hero-over{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 24px;pointer-events:none;
}
#cf-hero-over .elementor-widget,
#ab-hero-over .elementor-widget,
#ty-hero-over .elementor-widget,
#wl-hero-over .elementor-widget{pointer-events:auto}
#cf-hero::after,
#ab-hero::after,
#ty-hero::after,
#wl-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,49,31,.34),rgba(12,49,31,.52));
}
@media (max-width:760px){
  #cf-hero-over,
  #ab-hero-over,
  #ty-hero-over,
  #wl-hero-over{position:static;background:var(--wn-green-800);padding:44px 24px}
  #cf-hero::after,
  #ab-hero::after,
  #ty-hero::after,
  #wl-hero::after{display:none}
}

/* The About hero runs three tall strips, where holding the crop near the top
   keeps faces in frame. The thank-you hero is one landscape frame of the same
   room, and 22% lands on the ceiling: correlating the mockup's own crop against
   the source file puts it at 68.5% instead. */
#ty-hero .wn-el-strip.wn-el-strip img{object-position:center 69%}

/* ====================================== Elementor page overrides (global) ==
   Elementor writes per-widget CSS into wp-content/uploads/elementor/css/, and
   that file is enqueued AFTER this one - so a plain class here loses every tie.
   `:not(#_)` adds an id's worth of specificity without matching anything, which
   is enough to win and is cheaper to read than repeating a class five times.
   ========================================================================== */

/* The pages were authored at Figtree 300, which reads too light at the sizes
   the brand uses. The weight lives in each widget's own generated CSS, so it is
   lifted here rather than by re-exporting every page. Headings and buttons are
   left alone - only running copy moves. */
:is(.elementor-widget-text-editor,.elementor-widget-icon-list):not(#_),
:is(.elementor-widget-text-editor,.elementor-widget-icon-list):not(#_) :is(p,ul,ol,li,.elementor-icon-list-text){
  font-weight:450;
}
/* `bolder` resolves off the paragraph's own weight, so emphasis inside light
   body copy barely moved. Name the weight instead. */
:is(.elementor-widget-text-editor,.elementor-widget-icon-list):not(#_) :is(strong,b){
  font-weight:600;
}

/* Body copy a step down. For paragraphs em does the work, so each widget keeps
   its own size relationship - a 20px paragraph lands at 18.6px, a 17px note at
   15.8px. Icon lists can't use em: Elementor sizes that span directly rather
   than letting it inherit, so em would resolve against the 15px base instead.
   They take the body size outright, which is the rule anyway - a bulleted list
   reads as body copy. A list deliberately set larger needs this rule widened. */
.elementor-widget-text-editor:not(#_) > :is(p,ul,ol,blockquote){font-size:.93em;line-height:1.45}
.elementor-widget-icon-list:not(#_) .elementor-icon-list-item > :is(.elementor-icon-list-text,a){
  font-size:18.6px;line-height:1.45;
}
/* Elementor centres the icon against the whole item, so on a bullet that wraps
   to two lines the tick floats into the gap between them. */
.elementor-widget-icon-list:not(#_) .elementor-icon-list-item{align-items:flex-start}
.elementor-widget-icon-list:not(#_) .elementor-icon-list-icon{margin-top:5px}
@media (max-width:760px){
  .elementor-widget-icon-list:not(#_) .elementor-icon-list-item > :is(.elementor-icon-list-text,a){font-size:17px}
}

/* ...but not inside the editorial wrappers. Those set their own reading size
   for a column of continuous prose, and the step-down above is meant for
   Elementor page sections - applied here it compounds, taking the legal pages
   to 14.9px and the articles to 16.7px against the 18px they ask for. Making
   the widget inherit also drops Elementor's global text weight of 400 back to
   the 300 the wrapper sets. */
:is(.wn-page__body,.wn-single__content):not(#_) .elementor-widget-text-editor,
:is(.wn-page__body,.wn-single__content):not(#_) .elementor-widget-text-editor > :is(p,ul,ol,li,blockquote){
  font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:normal;
}

/* Gold buttons: dark green with white text on hover. Applies to every Elementor
   button so the behaviour is consistent; the outlined variants pick up the same
   fill, which reads as intended against the gold border. */
.elementor-button:not(#_):is(:hover,:focus-visible){
  background-color:var(--wn-green-800);color:var(--wn-white);border-color:var(--wn-green-800);
}

/* In-page section nav (Speakers / Venue / Agenda / Partners / Register).
   Add the class `wn-cf-subnav` to that container in Elementor to pick this up. */
.wn-cf-subnav:not(#_){padding-block:10px}
.wn-cf-subnav:not(#_) .elementor-heading-title{font-size:17px;letter-spacing:.09em;line-height:1.2}
@media (max-width:760px){
  .wn-cf-subnav:not(#_) .elementor-heading-title{font-size:15px}
}

/* Partner logos. Height alone is the wrong yardstick: a square mark and a long
   wordmark capped at the same height read as wildly different sizes, and several
   of these files carry a lot of empty space inside them (the Dean Davidson
   wordmark is 77% padding, the photographer's mark 42%). wnorth.js measures the
   ink in each file and sets a height that equalises the visible area, so these
   are only the fallback for a logo it could not read. */
.wn-el-partner img{width:auto;max-width:260px;max-height:72px;object-fit:contain}
.wn-el-partner{margin-block:18px}
@media (max-width:760px){.wn-el-partner img{max-width:150px;max-height:52px}.wn-el-partner{margin-block:8px}}

/* Conference cards keep their accent on hover - see the scoped reset above for
   why a bare <button> would otherwise turn Hello Elementor's default pink. */
.wn-cf__card:is(:hover,:focus-visible){
  background:var(--wn-cf-bg,#BE902D);color:var(--wn-cf-ink,#0C311F);
}

/* ============================== speaker grid: dark section / mono portraits ==
   The New York Summit runs the same grid twice - this year's speakers on a
   light ground, past speakers on dark green with the portraits desaturated.
   Mono is a filter rather than a second set of files, so the popup still
   opens in colour and swapping back is one line. */

.wn-psblock.is-dark .wn-ps__role{color:rgba(255,255,255,.82)}
.wn-psblock.is-dark .wn-ps__card:hover .wn-ps__name{color:var(--wn-white)}
.wn-psblock.is-dark .wn-ps__empty{color:rgba(255,255,255,.75)}
.wn-psblock.is-mono .wn-ps__photo img{filter:grayscale(1) contrast(1.02)}
.wn-psblock.is-mono .wn-ps__card:hover .wn-ps__photo img{filter:grayscale(0)}

/* A speaker with no bio and no LinkedIn renders as a plain div, so it should
   not look or behave like something you can open. */
.wn-ps__card.is-static{cursor:default}
.wn-ps__card.is-static:hover .wn-ps__photo img{scale:none}
.wn-ps__card.is-static:hover .wn-ps__name{color:var(--wn-gold)}
.wn-psblock.is-dark .wn-ps__card.is-static:hover .wn-ps__name{color:var(--wn-gold)}

/* A button sitting on a dark section inverts instead: white fill, dark text.
   wnorth.js measures the ground behind each button and adds .wn-on-dark. */
:is(.elementor-button,.wn-btn).wn-on-dark:not(#_):is(:hover,:focus-visible){
  background-color:var(--wn-white);color:var(--wn-green-800);border-color:var(--wn-white);
}

/* ================================================= sponsor tiers + boxes ==
   Partnership Opportunities needs two things Elementor has no widget for: the
   four-tier benefits matrix, and the bordered "what's included" panel that
   repeats under each opportunity. Both are plain markup in an HTML widget so
   the copy stays editable, and everything below is the styling for it. */

/* --- the benefits matrix ------------------------------------------------- */
.wn-tiers{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0}
.wn-tiers table{width:100%;min-width:820px;border-collapse:collapse;font-family:var(--wn-sans)}
.wn-tiers caption{
  caption-side:top;text-align:left;background:var(--wn-green-800);color:var(--wn-gold);
  font-size:20px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  padding:22px 24px;
}
.wn-tiers thead th{
  background:var(--wn-green-800);color:var(--wn-white);
  font-size:14px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:22px 12px;text-align:center;vertical-align:middle;white-space:nowrap;
}
/* The caption text now sits in this cell, so it carries the caption's colour
   and size and the row reads as one green bar rather than two. */
.wn-tiers thead th:first-child{
  width:44%;text-align:left;padding-left:24px;
  color:var(--wn-gold);font-size:20px;font-weight:400;letter-spacing:.11em;
}
/* Hello stripes the row labels too, at (0,1,3) - hence the id-weight here. */
.wn-tiers tbody th:not(#_){
  font-size:16px;font-weight:400;line-height:1.35;color:var(--wn-green-800);
  text-align:left;padding:16px 22px 16px 24px;vertical-align:middle;
  background:var(--wn-white);
}
.wn-tiers tbody th em{display:block;font-style:italic;color:var(--wn-gold);font-size:15px;margin-top:2px}
.wn-tiers tbody th strong{font-weight:600}
/* Hello Elementor stripes table rows at (0,1,3), so these need the id-weight
   to hold a column wash rather than a row one. */
.wn-tiers td:not(#_){
  width:14%;text-align:center;vertical-align:middle;padding:16px 10px;
  font-size:19px;color:var(--wn-green-800);background:var(--wn-white);
}
/* Each tier its own shade, lightest for Presenting through darkest for
   Supporting, with white grid lines between the checkmark cells. */
.wn-tiers td:not(#_){border:2px solid var(--wn-white)}
.wn-tiers tbody td:nth-child(2):not(#_){background:#EAF8F2}
.wn-tiers tbody td:nth-child(3):not(#_){background:#D5F0E5}
.wn-tiers tbody td:nth-child(4):not(#_){background:#BFE7D7}
.wn-tiers tbody td:nth-child(5):not(#_){background:#A9DEC9}
.wn-tiers tbody tr + tr th,
.wn-tiers tbody tr + tr td{border-top:1px solid rgba(13,49,31,.10)}
.wn-tiers .wn-tiers__yes{display:inline-block;width:19px;height:19px;color:var(--wn-spring)}
.wn-tiers .wn-tiers__yes svg{width:100%;height:100%;display:block}

/* --- the "includes" panel ------------------------------------------------ */
.wn-incl{
  border:1px solid rgba(13,49,31,.55);border-radius:22px;
  padding:22px 26px 24px;font-family:var(--wn-sans);
}
.wn-incl__title{
  margin:0 0 14px;font-size:19px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--wn-green-800);
}
.wn-incl ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;
}
.wn-incl li{
  position:relative;padding-left:26px;font-size:17px;font-weight:400;line-height:1.4;
  color:var(--wn-green-800);
}
.wn-incl li::before{
  content:"";position:absolute;left:0;top:.36em;width:15px;height:11px;
  background:var(--wn-spring);
  -webkit-mask:var(--wn-tick) no-repeat center/contain;
          mask:var(--wn-tick) no-repeat center/contain;
}
.wn-incl--single ul{grid-template-columns:minmax(0,1fr)}

/* --- price pill used by the membership + conference blocks --------------- */
.wn-pricepill{
  display:inline-block;border:1px solid var(--wn-spring);border-radius:999px;
  padding:12px 30px;font-family:var(--wn-sans);font-size:23px;font-weight:400;
  color:var(--wn-green-800);
}

@media (max-width:760px){
  .wn-incl ul{grid-template-columns:minmax(0,1fr)}
  .wn-incl{padding:18px 20px 20px}
  .wn-tiers caption{font-size:17px;padding:18px}
}

/* ------------------------------------------------ image band + fill ------ */
/* A portrait photo cropped into the 440px hero band centres on the subject's
   chest, cutting the head off. Bias the crop upward for those. */
.wn-el-strip.wn-el-face img{object-position:center 22%}

/* Lets a photo column match the height of the copy beside it: the row is set
   to stretch, and the image fills whatever height that turns out to be. */
.wn-el-fill.wn-el-fill{flex:1 1 auto;min-height:0;height:100%}
.wn-el-fill.wn-el-fill > *,
.wn-el-fill.wn-el-fill figure,
.wn-el-fill.wn-el-fill .elementor-image{height:100%;margin:0}
.wn-el-fill.wn-el-fill img{width:100%;height:100%;object-fit:cover;display:block}

/* A logo row nested inside a column has far less width than the full-width
   partner wall, so it gets a smaller optical target - see wnorth.js. */
.wn-el-partner-sm{margin-block:8px}

/* ============================================================ milestones ==
   Circular photos threaded onto a drawn line, each with its year on a pill and
   a dotted run across to the copy. The thread is an SVG built by wnorth.js from
   the real circle positions, then drawn in as you scroll - see the block at the
   end of that file. Accent colour arrives per entry as --wn-ms-accent. */

/* Sept 15: larger photographs in a wider lane, so the timeline reads closer to
   the middle of the page rather than hugging the left edge. */
.wn-ms{position:relative;font-family:var(--wn-sans);--wn-ms-stage:520px;padding-left:60px}
@media (max-width:1180px){.wn-ms{padding-left:0}}
.wn-ms__list{list-style:none;margin:0;padding:0}

/* --- the thread ---------------------------------------------------------- */
.wn-ms__wave{
  position:absolute;top:0;left:0;width:var(--wn-ms-stage);height:100%;
  pointer-events:none;z-index:0;
}
.wn-ms__wave svg{width:100%;height:100%;display:block;overflow:visible}
.wn-ms__thread{stroke-linecap:round}
.wn-ms__thread--back{stroke:rgba(13,49,31,.13);stroke-width:1.2}
.wn-ms__thread--mid {stroke:rgba(13,49,31,.20);stroke-width:1.2}
.wn-ms__thread--lead{stroke:var(--wn-spring);stroke-width:2.4}

/* --- one entry ----------------------------------------------------------- */
.wn-ms__item{
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--wn-ms-stage) minmax(0,1fr);
  column-gap:70px;align-items:center;padding-bottom:34px;
}
.wn-ms__item:last-child{padding-bottom:0}

/* the circle sits left or right within its lane, so the thread has to weave */
.wn-ms__stage{position:relative;display:flex}
/* a left-hand circle leaves lane to cross, so the dots start at its edge and
   meet the piece that spans the column gap */
.wn-ms__item:nth-child(odd) .wn-ms__stage::after{
  content:"";position:absolute;left:308px;right:0;top:calc(50% - 106px);
  border-top:2px dotted rgba(13,49,31,.28);
}
.wn-ms__item:nth-child(odd)  .wn-ms__stage{justify-content:flex-start}
.wn-ms__item:nth-child(even) .wn-ms__stage{justify-content:flex-end}

/* Square rather than circular: the archive photographs are documentary shots
   with the subject off-centre, and a circle cropped too much out of most of
   them. The box was already 1:1, so this only changes the mask - no reframing. */
.wn-ms__photo{
  position:relative;width:300px;height:300px;border-radius:16px;
  overflow:visible;flex:0 0 auto;
}
/* Elementor's frontend.min.css carries .elementor img{height:auto} at the same
   specificity as this and loads after it, so without the tie-breaker a
   landscape photo letterboxes inside the circle instead of filling it. */
.wn-ms__photo img:not(#_),
.wn-ms__ph{
  width:100%;height:100%;border-radius:16px;object-fit:cover;display:block;
  background:#E6E8E7;
}
.wn-ms__photo img{box-shadow:0 14px 34px rgba(13,49,31,.16)}

/* the year, riding the edge of the frame on the side the copy is on */
.wn-ms__pill{
  position:absolute;top:14px;right:-18px;z-index:2;
  padding:9px 20px;border-radius:999px;
  background:var(--wn-ms-accent,var(--wn-gold));color:var(--wn-white);
  font-size:16px;font-weight:600;letter-spacing:.08em;white-space:nowrap;
  box-shadow:0 6px 16px rgba(13,49,31,.18);
}
.wn-ms__item:nth-child(even) .wn-ms__pill{right:auto;left:-18px}

/* the dotted run from the circle across to the copy */
.wn-ms__body{position:relative;padding-left:26px}
.wn-ms__body::before{
  content:"";position:absolute;left:-70px;right:calc(100% - 2px);top:34px;
  border-top:2px dotted rgba(13,49,31,.28);
}
.wn-ms.is-armed .wn-ms__item:not(.is-in) .wn-ms__stage::after{opacity:0}
.wn-ms.is-armed .wn-ms__stage::after{transition:opacity .5s var(--wn-ease) .2s}
.wn-ms__body::after{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:2px;
  background:var(--wn-ms-accent,var(--wn-gold));
}

.wn-ms__title{
  margin:0;font-family:var(--wn-serif);font-weight:400;font-size:42px;
  line-height:1.08;color:var(--wn-green-800);
}
.wn-ms__highlight{
  margin:10px 0 0;font-size:16px;font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;color:var(--wn-ms-accent,var(--wn-gold));
}
.wn-ms__points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.wn-ms__points li{
  position:relative;padding-left:28px;font-size:17px;font-weight:400;line-height:1.45;
  color:var(--wn-green-800);
}
.wn-ms__points li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:11px;
  background:var(--wn-ms-accent,var(--wn-gold));
  -webkit-mask:var(--wn-arrow) no-repeat center/contain;
          mask:var(--wn-arrow) no-repeat center/contain;
}
.wn-ms__points li p{margin:0}
.wn-ms__year,.wn-ms__sticky,.wn-ms__dot,.wn-ms__rail{display:none}

/* --- arrival -------------------------------------------------------------
   Hidden only once the script has said it will do the revealing. Without JS,
   or if the observer never fires, every entry stays visible - an animation
   that fails should cost the flourish, never the content. */
.wn-ms.is-armed .wn-ms__item:not(.is-in) .wn-ms__photo{opacity:0;transform:scale(.86)}
.wn-ms.is-armed .wn-ms__item:not(.is-in) .wn-ms__pill{opacity:0;transform:scale(.6)}
.wn-ms.is-armed .wn-ms__item:not(.is-in) .wn-ms__body > *{opacity:0;transform:translateY(20px)}
.wn-ms.is-armed .wn-ms__item:not(.is-in) .wn-ms__body::before{transform:scaleX(0)}
.wn-ms.is-armed .wn-ms__item:not(.is-in) .wn-ms__body::after{transform:scaleY(0)}
.wn-ms.is-armed .wn-ms__photo{transition:opacity .6s var(--wn-ease),transform .7s var(--wn-ease)}
.wn-ms.is-armed .wn-ms__pill{transition:opacity .4s var(--wn-ease) .25s,transform .5s var(--wn-ease) .25s}
.wn-ms.is-armed .wn-ms__body > *{transition:opacity .6s var(--wn-ease),transform .6s var(--wn-ease)}
.wn-ms.is-armed .wn-ms__body::before{transform-origin:left center;transition:transform .6s var(--wn-ease) .15s}
.wn-ms.is-armed .wn-ms__body::after{transform-origin:center top;transition:transform .5s var(--wn-ease) .1s}
.wn-ms.is-armed .wn-ms__item.is-in .wn-ms__body > *:nth-child(2){transition-delay:.08s}
.wn-ms.is-armed .wn-ms__item.is-in .wn-ms__body > *:nth-child(3){transition-delay:.14s}

@media (max-width:1100px){
  .wn-ms{--wn-ms-stage:420px}
  .wn-ms__item{column-gap:52px}
  .wn-ms__photo{width:250px;height:250px}
  .wn-ms__body::before{left:-52px}
  .wn-ms__item:nth-child(odd) .wn-ms__stage::after{left:258px;top:calc(50% - 86px)}
  .wn-ms__title{font-size:34px}
}
@media (max-width:820px){
  .wn-ms__wave{display:none}
  .wn-ms__item:nth-child(odd) .wn-ms__stage::after{display:none}
  .wn-ms__item{grid-template-columns:1fr;column-gap:0;row-gap:22px;padding-bottom:56px}
  .wn-ms__item:nth-child(even) .wn-ms__stage{justify-content:flex-start}
  .wn-ms__photo{width:190px;height:190px}
  .wn-ms__item:nth-child(even) .wn-ms__pill{right:-18px;left:auto}
  .wn-ms__body::before{display:none}
  .wn-ms__title{font-size:30px}
  .wn-ms__points li{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .wn-ms.is-armed .wn-ms__item:not(.is-in) :is(.wn-ms__photo,.wn-ms__pill,.wn-ms__body > *){opacity:1;transform:none}
  .wn-ms.is-armed .wn-ms__item:not(.is-in) .wn-ms__body::before{transform:none}
  .wn-ms.is-armed .wn-ms__item:not(.is-in) .wn-ms__body::after{transform:none}
  .wn-ms__thread--lead{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}

/* ============================================================== home page ==
   Pieces the home page needs that no Elementor widget gives us: a photo
   slider behind the hero rather than a single background, the arch-topped
   frame, the city pill on an event card, and the founder's quote mark. */

/* --- hero: carousel underneath, copy on top -----------------------------
   The carousel stays in normal flow so its height is the hero's height - made
   absolute it would collapse the container to nothing. The scrim is weighted to
   the left, where the headline sits, so white type holds on whichever frame
   happens to be showing. */
#hp-hero{position:relative}
/* Height lives here rather than in the widget's own setting: Elementor emitted
   no per-widget CSS for this carousel, so the swiper initialised at zero and
   took the whole hero down with it. */
#hp-hero .wn-hero-slides{width:100%;height:clamp(460px,52vw,680px)}
#hp-hero .wn-hero-slides > .elementor-widget-container,
#hp-hero .wn-hero-slides .swiper,
#hp-hero .wn-hero-slides .swiper-wrapper,
#hp-hero .wn-hero-slides .swiper-slide{height:100%}
#hp-hero .wn-hero-slides .swiper-slide-inner,
#hp-hero .wn-hero-slides .elementor-carousel-image{height:100%;background-size:cover;background-position:center}
#hp-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,32,20,.88) 0%,rgba(8,32,20,.64) 48%,rgba(8,32,20,.26) 100%);
}
#hp-hero-over{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  padding:0;pointer-events:none;
}
#hp-hero-over .elementor-widget{pointer-events:auto}
/* The photos run edge to edge; the words line up with everything else on the
   page, so the copy gets the same container the header and footer use. */
#hp-hero-copy{
  width:100%;
  max-width:calc(var(--wn-container) + var(--wn-gutter) * 2);
  margin-inline:auto;padding-inline:var(--wn-gutter);
}
@media (max-width:760px){
  #hp-hero-over{position:static;background:var(--wn-green-800);padding:44px 0}
  #hp-hero::after{display:none}
}

/* --- arch-topped photo ---------------------------------------------------
   Proportions come off the mockup: the event cards are 379x407 and the
   "who is WNORTH" frame is 557x705, taller so it runs the height of the copy
   beside it. Both crop to fit rather than letting the file's own shape decide. */
/* The top corners are a round 68px, not the wide shallow dome a percentage
   radius gives - measured off the reference: on a 344px card the top edge runs
   flat until roughly 66px in from each end. Absolute so the two arch sizes read
   as the same corner rather than scaling with the box. */
.wn-el-arch.wn-el-arch img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  aspect-ratio:379/407;
  border-radius:68px 68px 16px 16px;
}
.wn-el-arch--tall.wn-el-arch--tall img{aspect-ratio:557/705;border-radius:68px 68px 16px 16px}

/* --- city pill on an event card ------------------------------------------ */
.wn-el-city .elementor-heading-title,
.wn-el-city{
  display:inline-block;padding:9px 26px;border-radius:999px;
  background:var(--wn-gold);color:var(--wn-white);
  font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}

/* --- gradient rule ------------------------------------------------------
   The hairline that closes a dark section, in the same spectrum as the
   utility bar so the two read as one system. */
.wn-el-rule .elementor-divider-separator,
.wn-el-rule .elementor-divider__element{border:0 !important}
.wn-el-rule .elementor-divider{padding:0 !important}
.wn-el-rule .elementor-divider-separator{
  height:2px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,
    var(--wn-grad-5) 0%, var(--wn-grad-1) 22%, var(--wn-grad-2) 44%,
    var(--wn-grad-3) 66%, var(--wn-grad-4) 84%, var(--wn-grad-5) 100%);
}

.wn-el-rule.wn-el-rule--thick .elementor-divider-separator{height:3px}

/* --- the founder's quote mark -------------------------------------------- */
.wn-quotemark{
  display:block;width:60px;height:52px;background:var(--wn-spring);
  -webkit-mask:var(--wn-quote) no-repeat left top/contain;
          mask:var(--wn-quote) no-repeat left top/contain;
}

/* --- stat bands ----------------------------------------------------------
   Elementor's counter puts the label above the number and only fills in once
   its waypoint fires, which left the figures reading "0" here. This is the
   same thing with the order fixed and the final number already in the markup,
   so it is right before any script runs; wnorth.js counts up from zero only
   once it knows it can. */
.wn-stats{
  display:flex;flex-wrap:wrap;justify-content:space-around;align-items:flex-start;
  gap:34px 40px;width:100%;font-family:var(--wn-sans);
}
.wn-stats__item{text-align:center;min-width:130px}
.wn-stats__n{
  display:block;font-family:var(--wn-serif);font-weight:400;color:var(--wn-gold);
  line-height:1.02;font-size:clamp(46px,5vw,74px);font-variant-numeric:lining-nums;
}
.wn-stats__n small{font-size:.58em}
.wn-stats__l{
  display:block;margin-top:8px;font-size:15px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wn-white);line-height:1.4;
}
.wn-stats--sm .wn-stats__n{font-size:clamp(38px,3.6vw,58px)}
.wn-stats--sm .wn-stats__l{font-size:14px;letter-spacing:.12em}
@media (max-width:760px){
  .wn-stats{gap:26px 24px}
  .wn-stats__item{min-width:44%}
}

/* ----------------------------------------------- homepage, Sept 10 edits --
   Fact counters closer together with white rules between them; three photo
   shapes; the membership watermark. */
#hp-stats .wn-stats:not(#_){justify-content:center;column-gap:0}
#hp-stats .wn-stats__item{padding-inline:56px}
#hp-stats .wn-stats__item + .wn-stats__item{border-left:1px solid rgba(255,255,255,.4)}
@media (max-width:760px){
  #hp-stats .wn-stats__item{padding-inline:8px}
  #hp-stats .wn-stats__item + .wn-stats__item{border-left:0}
}

/* Upcoming Flagship Events: a plain rounded rectangle instead of the arch */
.wn-el-arch.wn-el-arch--rect.wn-el-arch--rect img:not(#_){border-radius:16px}
/* Who is WNORTH: a true arch - the top a full half-circle, the base square.
   Oversized radii are scaled down to fit, which is what makes it a semicircle
   at any width. */
.wn-el-arch.wn-el-arch--dome.wn-el-arch--dome img:not(#_){border-radius:9999px 9999px 0 0}
/* Our journey: softer corners than the card default. The image widgets also
   carry a 14px radius in the page's own Elementor CSS, which loads after this
   file - hence the id-weight. */
.wn-el-wide.wn-el-wide.wn-el-wide--soft img:not(#_){border-radius:24px}

/* Explore the membership: the WNORTH mark in light green behind the copy */
#hp-member-copy{position:relative}
/* Sept 15: bigger, and running off the right edge of the page as the mockup has
   it. The home page clips the overflow so it cannot add a sideways scroll. */
#hp-member-copy::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-26%;top:50%;transform:translateY(-50%);
  width:min(820px,124%);aspect-ratio:383.1/292.9;
  background:rgba(40,191,136,.12);
  -webkit-mask:url("../img/wnorth-mark-white.svg") no-repeat center/contain;
          mask:url("../img/wnorth-mark-white.svg") no-repeat center/contain;
}
#hp-member-copy > *{position:relative;z-index:1}

/* ============================ founder quote rule + member testimonials ==
   Two pieces the home page needs: the line that drops from the quote mark and
   sweeps out to the right edge, and the members slider. */

/* --- the sweeping rule ---------------------------------------------------
   An L: down the left of the quote, round the corner, then out past the
   container to the viewport edge. `calc(50% - 50vw)` measures the container's
   own half-width against the viewport's, which is exactly the overhang needed
   to reach the edge - so it bleeds without the section going full width. */
#hp-founder > .e-con-inner{position:relative}
/* Sept 15: the client's red markup showed where this line belongs - starting
   below the quote mark, tighter to the copy, and a smaller corner. The line now
   runs on that path; there is no second line. */
.wn-quoterule{
  position:absolute;left:40px;top:245px;bottom:52px;right:calc(50% - 50vw);
  border-left:2px solid var(--wn-gold);
  border-bottom:2px solid var(--wn-gold);
  border-bottom-left-radius:44px;
  pointer-events:none;z-index:0;
}
/* the inner line: drops from under the quote mark, rounds the corner and runs
   out beneath the portrait, inside the gold one */
/* the horizontal run cools from gold to teal on its way out */
.wn-quoterule::after{
  content:"";position:absolute;left:44px;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--wn-gold) 0%,#3F7369 52%,var(--wn-spring) 100%);
}
#hp-founder .elementor-widget{position:relative;z-index:1}
/* ...except the one holding the rule, which must measure against the
   container, not against its own 2px-tall wrapper. */
#hp-founder .wn-quoterule-host{position:static;z-index:auto}

/* --- members slider ------------------------------------------------------
   Same widget as the Capacity Lab carousel, so the layout rules there are the
   starting point; this variant is the round mono portrait, the name and role
   above the quote, and the quote itself set large in the serif. */
.wn-testi-home .elementor-testimonial.elementor-testimonial{
  display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:48px;
  align-items:center;text-align:left;
}
.wn-testi-home .elementor-testimonial__footer{display:contents}
.wn-testi-home .elementor-testimonial__image{
  grid-column:1;grid-row:1;width:250px;height:250px;margin:0;
}
.wn-testi-home:not(#_) .elementor-testimonial__image img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  filter:grayscale(1) contrast(1.02);
}
.wn-testi-home .elementor-testimonial__content{
  grid-column:2;grid-row:1;display:flex;flex-direction:column;padding:0;background:none;
}
.wn-testi-home .elementor-testimonial__content::after{display:none}
.wn-testi-home:not(#_) .elementor-testimonial__cite{
  order:-1;position:relative;padding-left:76px;margin:0 0 14px;font-style:normal;
}
.wn-testi-home .elementor-testimonial__cite::before{
  content:"";position:absolute;left:0;top:2px;width:58px;height:46px;
  background:var(--wn-spring);
  -webkit-mask:var(--wn-quote) no-repeat left top/contain;
          mask:var(--wn-quote) no-repeat left top/contain;
}
.wn-testi-home:not(#_) .elementor-testimonial__name{
  display:block;font-family:var(--wn-sans);font-size:25px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--wn-green-800);line-height:1.2;
}
.wn-testi-home:not(#_) .elementor-testimonial__title{
  display:block;margin-top:4px;font-family:var(--wn-sans);font-size:18px;font-weight:400;
  color:var(--wn-green-800);line-height:1.4;
}
.wn-testi-home:not(#_) .elementor-testimonial__text{
  font-family:var(--wn-serif);font-style:italic;font-weight:400;font-size:46px;
  line-height:1.2;color:var(--wn-green-800);padding-left:76px;
}
.wn-testi-home .swiper-pagination{position:static;margin-top:26px;padding-left:298px}
.wn-testi-home .swiper-pagination-bullet{background:var(--wn-green-800);opacity:.25}
.wn-testi-home .swiper-pagination-bullet-active{opacity:1}

@media (max-width:900px){
  .wn-testi-home .elementor-testimonial.elementor-testimonial{
    grid-template-columns:minmax(0,1fr);row-gap:24px;justify-items:center;text-align:center;
  }
  .wn-testi-home .elementor-testimonial__image{grid-column:1;grid-row:1;width:180px;height:180px}
  .wn-testi-home .elementor-testimonial__content{grid-column:1;grid-row:2;align-items:center}
  .wn-testi-home:not(#_) .elementor-testimonial__cite{padding-left:0;padding-top:54px;text-align:center}
  .wn-testi-home .elementor-testimonial__cite::before{left:50%;transform:translateX(-50%);top:0}
  .wn-testi-home:not(#_) .elementor-testimonial__text{padding-left:0;font-size:30px;text-align:center}
  .wn-testi-home .swiper-pagination{padding-left:0;text-align:center}
  .wn-quoterule{display:none}
}


/* ================================================== brand partnership page ==
   Corrections asked for on /brand-partnership/. Everything here is opt-in by
   class, so no other page moves. */

/* Instrument Serif ships one weight, so "bolder" has to be synthesised. A
   symmetric stroke thickens the letterforms without the lopsided smear that
   synthetic bold gives a serif face. */
.wn-el-strong:not(#_),
.wn-el-strong:not(#_) em{-webkit-text-stroke:.6px currentColor}

/* Zooms the Experience Bag flat-lay onto the branded tote without re-cutting
   the file: the widget crops, the image is scaled up and pulled left/up so the
   bag lands in the middle. Percentages resolve against the widget width, which
   is what keeps this stable at every breakpoint.

   The window is x 288-1754, y 223-1200 of the 2048x1365 original. 288 is where
   the products actually start - the shot carries 288px of bare stone down its
   left edge, which read as empty space in the frame - and the right edge is set
   to put the tote's centre on the frame's centre, which costs part of the
   magazine on that side. The 3:2 frame is unchanged, so nothing reflows. */
.wn-el-bagzoom:not(#_){overflow:hidden;border-radius:14px;line-height:0}
.wn-el-bagzoom:not(#_) img{
  display:block;width:139.7%;max-width:none;height:auto;
  margin:-15.21% 0 -11.27% -19.64%;
}

/* The circle in "Other ways to Partner" stands taller than the mint band it
   sits on, so it is lifted out of flow and hung off the section itself. The
   offsets fix the overhang; the width cap keeps it clear of the copy on a
   narrow desktop, where object-fit lets it shrink rather than collide. */
#bp-otherways{position:relative}
#bp-otherways > .e-con-inner{position:static}
.wn-el-circleover:not(#_){
  position:absolute;right:0;left:auto;top:-46px;bottom:-46px;
  width:min(56vw,760px);margin:0;padding:0;z-index:2;pointer-events:none;
}
.wn-el-circleover:not(#_) .elementor-widget-container,
.wn-el-circleover:not(#_) figure,
.wn-el-circleover:not(#_) .elementor-image{height:100%;margin:0;line-height:0}
.wn-el-circleover:not(#_) img{
  display:block;width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:right center;
}

/* Eight partner marks have to share one line here, so the row runs at a
   smaller optical target than the full-width walls - see wnorth.js. */
.wn-el-partner-xs{margin-block:6px}

@media (max-width:1140px){
  .wn-el-circleover:not(#_){
    position:static;width:min(420px,100%);height:auto;margin:28px auto 0;
  }
  .wn-el-circleover:not(#_) .elementor-widget-container,
  .wn-el-circleover:not(#_) figure,
  .wn-el-circleover:not(#_) .elementor-image{height:auto}
  .wn-el-circleover:not(#_) img{height:auto;object-fit:fill}
}


/* ======================================================= New York Summit ==
   Corrections asked for on /ny-summit/. */

/* The date line is a label wearing a pill, so it does not answer to the
   pointer the way a real button does. */
.wn-el-static .elementor-button:not(#_):not(#_){cursor:default}
.wn-el-static .elementor-button:not(#_):not(#_):is(:hover,:focus,:focus-visible){
  background-color:var(--wn-gold);color:var(--wn-green-800);border-color:var(--wn-gold);
}
/* the same, for a pill set in white */
.wn-el-static.wn-el-static--light .elementor-button:not(#_):not(#_):is(:hover,:focus,:focus-visible){color:var(--wn-white)}
/* the same, for an outlined pill that has no fill of its own */
/* its resting fill is the dark green behind the hero title, so the hover holds
   that rather than going see-through over the photographs */
.wn-el-static.wn-el-static--outline .elementor-button:not(#_):not(#_):is(:hover,:focus,:focus-visible){background-color:var(--wn-green-800);color:var(--wn-white)}
/* a separator in a button label, wrapped by wnorth.js */
.wn-el-pipes .wn-pipe{color:var(--wn-green-800)}

/* Two of the four pass titles run to one line and two to two, which left the
   prices on different lines. Reserving two lines in every card lines the whole
   row up without touching the copy. */
.wn-pass-title:not(#_) .elementor-heading-title{
  display:flex;align-items:center;justify-content:center;
  min-height:2.6em;
}

/* The arch beside the VIP list runs the full height of the copy - top edge on
   the heading, bottom edge on the button - and squares off along the bottom. */
.wn-el-archfill.wn-el-archfill{flex:1 1 auto;min-height:0;height:100%;margin:0}
.wn-el-archfill.wn-el-archfill > *,
.wn-el-archfill.wn-el-archfill figure,
.wn-el-archfill.wn-el-archfill .elementor-image{height:100%;margin:0;line-height:0}
.wn-el-archfill.wn-el-archfill img:not(#_){
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:260px 260px 0 0;
}
@media (max-width:1024px){
  .wn-el-archfill.wn-el-archfill img:not(#_){aspect-ratio:4/3;height:auto;border-radius:180px 180px 0 0}
  /* once stacked the column has no height to fill, so the 100% collapsed the
     widget to 0px and the photo spilled over the next section */
  .wn-el-archfill.wn-el-archfill:not(#_),
  .wn-el-archfill.wn-el-archfill > *:not(#_),
  .wn-el-archfill.wn-el-archfill figure:not(#_),
  .wn-el-archfill.wn-el-archfill .elementor-image:not(#_){height:auto}
}


/* ------------------------------------------------- animated impact logo ---
   The supplied clip is a black mark on white with no alpha channel, so the
   colour is flipped in the browser rather than in the file: invert makes it
   white on black, and screen drops the black into the green behind it. */
.wn-impactlogo{
  display:block;width:100%;max-width:360px;height:auto;
  filter:invert(1);mix-blend-mode:screen;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .wn-impactlogo{animation:none}
}

@media (max-width:760px){
  .wn-el-arch.wn-el-arch img,
  .wn-el-arch--tall.wn-el-arch--tall img{border-radius:44px 44px 12px 12px}
}


/* ==================================================== London Summit page ==
   A rule that runs green into gold, and the same grain the NY Summit counter
   band uses. The gradient is painted on a pseudo-element: Elementor blanks
   background-image on containers below the fold until they scroll into view,
   and that reset does not reach ::after. */
.wn-el-ggrule:not(#_) .elementor-divider{padding:0}
.wn-el-ggrule:not(#_) .elementor-divider-separator{
  position:relative;border:0;height:2px;width:100%;
}
.wn-el-ggrule:not(#_) .elementor-divider-separator::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,var(--wn-green-800) 0%,var(--wn-gold) 100%);
}



/* ===================================================== Conference page ====
   The in-page section nav, the hero lockup row, and the newsletter band. */

/* The sub-nav carries the same spectrum as the utility bar rather than its own
   two-stop gradient, and the labels are set to read as navigation. */
/* Conference, Sept 10: both rows of price boxes share their row edge to edge,
   so the right box ends where the Member Access button and the rule do. */
#cf-prices-inperson:not(#_) > .e-con,
#cf-prices-virtual:not(#_) > .e-con{flex:1 1 0;min-width:0}
@media (max-width:767px){
  #cf-prices-inperson:not(#_) > .e-con,
  #cf-prices-virtual:not(#_) > .e-con{flex:1 1 100%}
}

#cf-subnav:not(#_){
  background:linear-gradient(90deg,
    var(--wn-grad-1) 0%, var(--wn-grad-2) 26%, var(--wn-grad-3) 52%,
    var(--wn-grad-4) 76%, var(--wn-grad-5) 100%);
}
/* Sept 15: 28px read as oversized - back to the standard sub-nav size */
#cf-subnav .elementor-heading-title:not(#_){
  font-size:17px;font-weight:600;letter-spacing:.09em;line-height:1.2;
}
@media (max-width:760px){#cf-subnav .elementor-heading-title:not(#_){font-size:15px}}

/* Hero: the mark to the left of a right-aligned title block. Both columns have
   to shrink to their content - an Elementor container grows to fill the row by
   default, which pushed the mark to one edge and the title to the other. */
#cf-mark img:not(#_){width:100%;max-width:112px;height:auto;display:block}
#cf-mark,
#cf-titleblock{flex:0 0 auto;width:auto}
#cf-titleblock{align-items:flex-end}

/* JB: the two hero pills overlap, gold in front. */
#cf-hero-over .elementor-widget-button:first-child{position:relative;z-index:2}

/* The newsletter band: heavier heading, tighter block, softer corner. */
.wn-newsletter:not(#_){padding:32px 40px;border-radius:32px}
.wn-newsletter__title:not(#_){-webkit-text-stroke:.7px currentColor}
.wn-newsletter__text:not(#_){font-weight:450}
@media (max-width:900px){
  .wn-newsletter:not(#_){padding:26px 22px;border-radius:26px}
}

/* One step past the 600 that body <strong> gets, for a name inside a lead
   paragraph that has to carry more than the sentence around it. */
.wn-el-xbold:not(#_) :is(strong,b){font-weight:700}

/* Body copy sits half a step above regular across the site. Figtree is loaded
   as a variable face (300-900), so 450 is a real weight rather than one the
   browser rounds - Instrument Serif ships 400 only and is deliberately left
   alone, since asking for more would make the browser fake it. */

/* ----------------------------------------------------- Capacity Lab hero --
   The photograph is 3:2 against a band nearer 3:1, so `cover` already crops it
   top and bottom and shows the full width. Sizing by width instead pushes past
   that and pulls the frame in; the height still covers with room to spare. */
#cl-hero:not(#_){background-size:118% auto}
/* Elementor's own background overlay never renders on this container, so the
   wash is painted here instead - without it the white title sits on a bright
   photograph. */
#cl-hero{position:relative}
#cl-hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--wn-hero-scrim);pointer-events:none;
}
#cl-hero > .e-con-inner{position:relative;z-index:1}

/* Capacity Lab, Sept 10. About the Retreat: the three photographs share the
   height of the copy beside them rather than setting it. Each image widget is
   a flex item with no height of its own, so the column takes the row's height
   from the text and divides it; the crop fills whatever each gets. */
#cl-about-photos:not(#_) > .elementor-widget-image{flex:1 1 0;min-height:0}
#cl-about-photos:not(#_) > .elementor-widget-image :is(.elementor-widget-container,a){height:100%}
#cl-about-photos:not(#_) > .elementor-widget-image img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){
  /* stacked under the copy there is no height to share, so they size themselves */
  #cl-about-photos:not(#_) > .elementor-widget-image{flex:none}
  #cl-about-photos:not(#_) > .elementor-widget-image img{height:auto;aspect-ratio:3/2}
}

/* ----------------------------------------------------------- hero veil --
   Every page that opens on a photograph carries the same wash, so the white
   title reads the same way throughout and the pages sit together as a set.
   Most of the Elementor pages paint it through their own export; these two
   are addressed by page id, because their exports give the hero container no
   id or class to hang this on. */

/* London Summit had no wash at all. */
body.page-id-800038 .elementor > .e-con:first-child{position:relative}
body.page-id-800038 .elementor > .e-con:first-child::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--wn-hero-scrim);pointer-events:none;
}
body.page-id-800038 .elementor > .e-con:first-child > .e-con-inner{position:relative;z-index:1}

/* London Delegation paints its own, at .72 - about twice the rest. */
body.page-id-800209 .elementor > .e-con:first-child:not(#_)::before{
  background:var(--wn-hero-scrim);opacity:1;
}
@media (max-width:760px){
  #cl-hero:not(#_){background-size:cover}
}

/* An opt-out from the site-wide 450 for a block that has to carry more weight
   than the copy around it. The class goes on the widget, not the paragraph. */
:is(.elementor-widget-text-editor,.elementor-widget-icon-list).wn-el-w500:not(#_) :is(p,ul,ol,li,.elementor-icon-list-text){
  font-weight:500;
}

/* The circle in "Joining us from Out of Town" is a section background, so it
   cannot overflow - at 45% of the width it stood 28px taller than the section
   and was being clipped top and bottom. Sizing by height instead keeps it
   inside whatever the copy beside it makes the section. */
/* NY Summit, Sept 15: the hotel photo at the size the client marked - a circle
   about 48% of the band's width, its centre near the right edge so it runs off
   the page. The section's own background was a pre-cut circle on a black and
   mint rectangle; it is replaced by a clean, transparent-cornered copy painted
   on ::after (Elementor blanks lazy container backgrounds, not pseudo-elements).
   The file is the circle clipped at its right edge, so the box is 1200x1442 and
   is placed far enough right that the clipped side is always off the page. */
#nys-outoftown:not(#_){background-image:none;position:relative;overflow:hidden}
#nys-outoftown::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:0;left:60.1%;width:39.9%;aspect-ratio:1200/1442;margin-top:3%;
  background:url("../img/nys-virgin-circle.webp") no-repeat left top/100% auto;
}
#nys-outoftown > .e-con-inner,
#nys-outoftown > .e-con{position:relative;z-index:1}
@media (max-width:767px){#nys-outoftown::after{display:none}}


/* ========================================== corporate partnerships page ==
   Thicker gradient rules, a textured reach band, and the two photographs that
   needed re-proportioning. */

.wn-el-ggrule--thick:not(#_) .elementor-divider-separator{height:4px}
/* Corporate Partnerships: ten partner logos in two rows of five. The row's own
   ::after is the line break, moved between the fifth and sixth logo with
   `order` - an empty spacer widget would do the same, but Elementor drops an
   empty HTML widget on import. The negative margin takes back the row gap the
   break's own empty line would otherwise add. Only this row uses the -md size. */
.e-con:has(> .wn-el-partner-md):not(#_)::after{
  content:"";display:block;position:static;flex-basis:100%;width:100%;height:0;
  margin:0 0 -24px;padding:0;order:2;
}
.e-con:has(> .wn-el-partner-md):not(#_) > .elementor-element{order:1}
.e-con:has(> .wn-el-partner-md):not(#_) > .elementor-element:nth-child(n+6){order:3}

/* between the hairline and the thick rule */
.wn-el-ggrule--mid:not(#_) .elementor-divider-separator{height:3px}

#poh-reach{
  background:var(--wn-green-800) url("../img/green-noise.png") repeat top left;
  background-size:240px 240px;
}

/* A group shot, so the crop holds the middle rather than the headroom a single
   portrait wants. */
.wn-el-circle.wn-el-group:not(#_) img{object-position:center 45%}

/* "A Look Back Over 10 Years" is a landscape moment, not a portrait. */
.wn-el-rect.wn-el-rect img:not(#_){
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;
}

/* The two testimonial portraits carry the section, so they run larger, and the
   band around them is tighter. */
.wn-el-quotephoto.wn-el-quotephoto img:not(#_){
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  object-position:center 20%;
}

/* Ten marks across two lines rather than three. */
.wn-el-partner-md{margin-block:10px}

/* ------------------------------------------------ full-bleed page heroes --
   The About, Apply, Thank You and Waitlist heroes were built with the usual
   24px section padding, which left a strip of green either side of the
   photographs. The mockups run them edge to edge. */
#ab-hero:not(#_),
#ty-hero:not(#_),
#wl-hero:not(#_){padding-left:0;padding-right:0}


/* ======================================================= Membership page ==
   /membership/. Everything is keyed to #mb-* container ids or .wn-mb-* widget
   classes, so no other page moves. */

/* hero: one full-bleed photograph, the title laid over it, and the apply pill
   straddling its bottom edge */
#mb-hero:not(#_){position:relative;padding-left:0;padding-right:0}
#mb-hero-over{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 24px 30px;pointer-events:none;
}
#mb-hero-over .elementor-widget{pointer-events:auto}
#mb-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,49,31,.34),rgba(12,49,31,.52));
}
/* Sept 15: same height and veil as every other page header */
#mb-hero .wn-el-strip.wn-el-strip img{height:var(--wn-hero-h);object-position:center 38%}
.wn-mb-overlap:not(#_){position:relative;z-index:3}
@media (max-width:760px){
  #mb-hero-over{position:static;background:var(--wn-green-800);padding:44px 24px 64px}
  #mb-hero::after{display:none}
}

/* photographs */
.wn-mb-photo img:not(#_){width:100%;aspect-ratio:373/510;object-fit:cover;border-radius:22px;display:block}
.wn-mb-card img:not(#_){width:100%;aspect-ratio:321/183;object-fit:cover;border-radius:16px;display:block}
.wn-mb-logos img:not(#_){width:100%;max-width:1090px;height:auto;display:block;margin:0 auto}
.wn-mb-ph{
  aspect-ratio:321/183;border-radius:16px;background:#E4E4E4;
  display:flex;align-items:center;justify-content:center;
}
.wn-mb-ph--forums{
  background:var(--wn-green-800);color:var(--wn-white);
  font-family:var(--wn-serif);font-size:58px;line-height:1;
}

/* card and step links: small caps label and the site arrow */
.wn-mb-more a{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--wn-sans);font-size:18px;font-weight:450;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wn-green-800);text-decoration:none;
}
.wn-mb-more a:hover{color:var(--wn-gold)}
.wn-mb-more .wn-arrow{width:30px;transition:transform .3s var(--wn-ease)}
.wn-mb-more a:hover .wn-arrow{transform:translateX(5px)}

/* the Jane Stoller quote: spectrum band, white type, portrait in colour.
   Painted on ::before - Elementor blanks lazy container backgrounds. */
#mb-quote{position:relative}
#mb-quote::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,
    var(--wn-grad-1) 0%, var(--wn-grad-2) 26%, var(--wn-grad-3) 52%,
    var(--wn-grad-4) 76%, var(--wn-grad-5) 100%);
}
#mb-quote > .e-con-inner,
#mb-quote > .elementor-element{position:relative;z-index:1}
.wn-testi-home--color:not(#_) .elementor-testimonial__image img{filter:none}
.wn-testi-home--ondark:not(#_) .elementor-testimonial__name,
.wn-testi-home--ondark:not(#_) .elementor-testimonial__title,
.wn-testi-home--ondark:not(#_) .elementor-testimonial__text{color:var(--wn-white)}
.wn-testi-home--single .swiper-pagination{display:none}

/* how it works: arrows between the steps drop out once they stack */
.wn-mb-steparrow svg{width:30px;height:24px;display:block;color:var(--wn-white)}
@media (max-width:767px){.wn-mb-steparrow{display:none}}

/* level boxes: the apply button sits on the box floor whatever the copy length */
.wn-mb-boxbtn:not(#_){margin-top:auto}

/* scholarship photo: square top, half-round base, hanging into the FAQ band */
.wn-mb-scholar:not(#_){position:relative;z-index:3}
.wn-mb-scholar img:not(#_){
  width:100%;aspect-ratio:500/763;object-fit:cover;display:block;
  border-radius:0 0 9999px 9999px;
}
@media (max-width:767px){.wn-mb-scholar:not(#_){margin-bottom:0}}

/* comparison table */
.wn-mbcmp{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wn-mbcmp table{width:100%;min-width:760px;border-collapse:collapse;font-family:var(--wn-sans);color:var(--wn-green-800);margin:0}
.wn-mbcmp th,.wn-mbcmp td{border:0}
.wn-mbcmp thead th:not(#_){
  background:var(--wn-green-800);color:var(--wn-gold);
  font-size:17px;font-weight:500;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;
  text-align:center;padding:14px 16px;width:18%;
}
.wn-mbcmp thead th:first-child:not(#_){width:auto}
.wn-mbcmp thead th + th:not(#_){border-left:1px solid rgba(255,255,255,.35)}
.wn-mbcmp tbody th:not(#_){
  background:var(--wn-white);text-align:left;vertical-align:middle;
  font-size:18px;font-weight:400;line-height:1.2;padding:16px 18px;
}
.wn-mbcmp tbody th strong{font-weight:600}
.wn-mbcmp tbody td:not(#_){
  text-align:center;vertical-align:middle;padding:12px 16px;
  font-size:15px;line-height:1.3;border-left:1px solid var(--wn-white);
}
.wn-mbcmp tbody tr + tr td:not(#_){border-top:1px solid var(--wn-white)}
.wn-mbcmp tbody td.is-m:not(#_){background:#C9EEE0;color:var(--wn-green-800)}
.wn-mbcmp tbody td.is-r:not(#_){background:#EAD9B9;color:var(--wn-green-800)}
.wn-mbcmp tbody td.is-no:not(#_){background:#E8E9E7}
.wn-mbcmp .wn-mbcmp__yes{display:block;width:17px;height:13px;margin:0 auto}
.wn-mbcmp .is-m .wn-mbcmp__yes{color:var(--wn-spring)}
.wn-mbcmp .is-r .wn-mbcmp__yes{color:var(--wn-gold)}
.wn-mbcmp .wn-mbcmp__yes svg{width:100%;height:100%;display:block}
.wn-mbcmp .wn-mbcmp__no{display:block;width:16px;height:3px;margin:0 auto;border-radius:2px;background:#B9BDB9}
.wn-mbcmp td .wn-mbcmp__note{display:block;margin-top:4px}

/* Measures the builder asked for but Elementor ignored (it reads
   _element_custom_width, not a max width): the hero subtitle, the unlocks intro
   and the levels heading. Scoped to the page so no other page moves. */
#mb-hero-over > .elementor-widget:last-child{max-width:900px}
.page-id-802181 .elementor-widget-text-editor:has(+ .wn-el-rule):not(#_){max-width:1000px}
.page-id-802181 .elementor-widget-heading:has(+ .e-con .wn-mb-boxbtn):not(#_){max-width:960px}

/* ================================================== Event Calendar page ==
   The six graphics are linked. Elementor leaves the link inline, which shrinks
   to its content, and the image is 100% of the link - so both resolve to 0px,
   and a 0px lazy image is never fetched. A block link gives the image a width. */
.page-id-802280 .elementor-widget-image a:not(#_){display:block}
.page-id-802280 .elementor-widget-image img:not(#_){display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
/* Three across: 31.4% x 3 plus the two 36px gaps is a hair over the row, so the
   third card wrapped. Size the cards from the row minus its gaps instead. */
.page-id-802280 .e-con:has(> .elementor-widget-image):not(#_){--width:calc((100% - 72px) / 3)}
@media (max-width:1024px){.page-id-802280 .e-con:has(> .elementor-widget-image):not(#_){--width:calc((100% - 36px) / 2)}}
@media (max-width:767px){.page-id-802280 .e-con:has(> .elementor-widget-image):not(#_){--width:100%}}

/* What's On, Sept 14: the page borrows the Membership hero, which is taller
   than every other page header and holds the crop near the top. Here it takes
   the standard header height and centres on the people round the table. */
.page-id-802250 #mb-hero .wn-el-strip.wn-el-strip img:not(#_){height:var(--wn-hero-h);object-position:center 66%}

/* Membership, Sept 15: the header carries a title, a date and a three-line
   subtitle over a busy crowd shot, so it takes a heavier veil than the other
   headers - an even darkening plus a deeper pool behind the copy. */
.page-id-802181 #mb-hero::after{
  background:
    radial-gradient(ellipse 62% 70% at 50% 50%,rgba(8,32,20,.42) 0%,rgba(8,32,20,0) 100%),
    linear-gradient(180deg,rgba(12,49,31,.52),rgba(12,49,31,.70));
}

/* Conference, Sept 15: the centre header photo is a tall portrait cropped at its
   middle, which put the two women's faces behind the "Four Seasons Resort,
   Whistler" pill. Holding the crop lower lifts them clear of it. */
#cf-hero .wn-el-strip img[src*="cf-header-1"]:not(#_){object-position:center 71%}

/* Event Calendar, Sept 15: the Luma embed follows the visitor's system theme and
   offers no way to fix it (the embed renders "system" whatever the URL says), so
   for a dark-mode visitor it paints #232323 inside the light grey band. The band
   follows the same setting instead, so the two always read as one surface. */
@media (prefers-color-scheme:dark){
  .page-id-802280 .elementor > .e-con:has(.wn-luma):not(#_){background-color:#232323}
  .page-id-802280 .e-con:has(.wn-luma) .elementor-heading-title:not(#_){color:#FFFFFF}
  .page-id-802280 .wn-luma:not(#_){background:#232323}
}

/* Our impact, Sept 15: the same white rules between the figures that the band at
   the top of the page carries. Two rows, so each row draws its own. */
/* clip, not hidden, and on the scrolling element: hidden on body alone leaves
   the overhang on html, and clip does not turn the page into a scroll container */
html:has(body.home),
body.home{overflow-x:clip}
#hp-impact .wn-stats:not(#_){justify-content:center;column-gap:0}
#hp-impact .wn-stats__item{padding-inline:46px}
#hp-impact .wn-stats__item + .wn-stats__item{border-left:1px solid rgba(255,255,255,.45)}
@media (max-width:760px){
  #hp-impact .wn-stats__item{padding-inline:8px}
  #hp-impact .wn-stats__item + .wn-stats__item{border-left:0}
}

/* Milestones, Sept 15: a soft mint page instead of flat white. The Elementor
   sections are transparent, so colouring the page body is enough. */
body.page-id-801054{background-color:#E9F8F3}

/* The animated brand mark on /about/. The file is black artwork on white with no
   alpha, so the colour is made in the browser: the filter maps black to spring
   green, and multiply drops the white sheet into the mint behind it. */
.wn-brandmark-wrap{
  display:block;position:relative;width:250px;max-width:100%;aspect-ratio:534/552;
  margin-inline:auto;overflow:hidden;
}
.wn-brandmark__filter{position:absolute;width:0;height:0;overflow:hidden}
/* The mark fills only 534x552 of the 1920x1080 frame, dead centre, so the video
   is zoomed to 359.6% inside a window cut to the mark - which lands it at the
   same size on the page as the still version it replaces. */
/* :not(#_) because Elementor's own `.elementor video` rule is heavier than a
   bare class and caps the width at the wrapper, which undoes the zoom. */
.wn-brandmark-wrap .wn-brandmark-vid:not(#_){
  position:absolute;left:50%;top:50%;width:359.6%;max-width:none;height:auto;
  transform:translate(-50%,-50.2%);
  filter:url("#wn-brandmark-green");mix-blend-mode:multiply;pointer-events:none;
}
.wn-brandmark-wrap .wn-brandmark:not(#_){display:none}
@media (prefers-reduced-motion:reduce){
  .wn-brandmark-wrap .wn-brandmark-vid:not(#_){display:none}
  .wn-brandmark-wrap .wn-brandmark:not(#_){display:block}
}
@media (max-width:760px){.wn-brandmark-wrap{width:200px}}

/* ============================================================ one speaker ==
   /speaker/<name>/. Same measure and type as the rest of the site: headshot
   beside the name, job title and company under it, bio in a reading column. */
.wn-spk{color:var(--wn-green-800);background:var(--wn-white);padding:56px 0 96px}
.wn-spk__back{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:34px;
  font-size:15px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wn-green-800);
}
.wn-spk__back:hover{color:var(--wn-gold)}
.wn-spk__backarrow{transform:scaleX(-1);width:34px}
.wn-spk__top{display:grid;grid-template-columns:320px minmax(0,1fr);gap:48px;align-items:start}
.wn-spk__photo img:not(#_),
.wn-spk__ph{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;
  background:#E6E8E7;
}
.wn-spk__name{
  margin:0;font-family:var(--wn-serif);font-weight:400;font-size:clamp(40px,4.6vw,60px);
  line-height:1.05;color:var(--wn-green-800);
}
.wn-spk__role{
  margin:14px 0 0;font-size:21px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wn-gold);
}
.wn-spk__company{margin:6px 0 0;font-size:20px;font-weight:450;color:var(--wn-green-800)}
.wn-spk__events{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.wn-spk__events li{
  padding:7px 18px;border-radius:999px;background:#E9F8F3;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--wn-green-800);
}
.wn-spk__linkedin{
  display:inline-block;margin-top:22px;padding:14px 30px;border-radius:999px;
  border:1px solid var(--wn-green-800);
  font-size:15px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wn-green-800);transition:background .22s var(--wn-ease),color .22s var(--wn-ease);
}
.wn-spk__linkedin:hover{background:var(--wn-green-800);color:var(--wn-white)}
/* Sept 15: the bio runs on in the right-hand column, directly under the name
   block, rather than starting again below the photograph. */
.wn-spk__bio{
  margin-top:30px;
  font-weight:450;font-size:18px;line-height:1.6;color:var(--wn-green-800);
}
.wn-spk__bio p{margin:0 0 18px}
.wn-spk__bio p:last-child{margin-bottom:0}
@media (max-width:900px){
  .wn-spk__top{grid-template-columns:minmax(0,1fr);gap:28px}
  .wn-spk__photo{max-width:280px}
}
@media (max-width:760px){
  .wn-spk{padding:36px 0 72px}
  .wn-spk__bio{font-size:17px}
}

/* ================================================================== 404 ==
   The frame around whatever the /404/ page says. Same measure, type and
   buttons as the rest of the site. */
.wn-404{color:var(--wn-green-800);background:var(--wn-white);padding:96px 0 120px;text-align:center}
.wn-404__code{
  margin:0;font-family:var(--wn-serif);font-weight:400;font-size:clamp(72px,11vw,150px);
  line-height:1;color:var(--wn-gold);
}
.wn-404__title{
  margin:18px 0 0;font-family:var(--wn-serif);font-weight:400;font-size:clamp(38px,5vw,62px);
  line-height:1.06;color:var(--wn-green-800);
}
.wn-404__title em{font-style:italic;color:var(--wn-gold)}
.wn-404__text{
  max-width:640px;margin:22px auto 0;
  font-weight:450;font-size:19px;line-height:1.55;color:var(--wn-green-800);
}
.wn-404__editable{max-width:760px;margin:12px auto 0;font-weight:450;font-size:19px;line-height:1.55}
.wn-404__editable :is(h1,h2,h3){
  font-family:var(--wn-serif);font-weight:400;line-height:1.06;color:var(--wn-green-800);
  margin:0 0 18px;font-size:clamp(38px,5vw,62px);
}
.wn-404__editable :is(h2,h3){font-size:clamp(28px,3.4vw,42px)}
.wn-404__editable em{font-style:italic;color:var(--wn-gold)}
.wn-404__editable p{margin:0 0 18px}
.wn-404__editable a{color:var(--wn-green-800);text-decoration:underline;text-underline-offset:4px}
.wn-404__editable a:hover{color:var(--wn-gold)}
.wn-404__links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.wn-404__btn{
  padding:17px 36px;border-radius:999px;border:1px solid var(--wn-green-800);
  font-size:15px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wn-green-800);transition:background .22s var(--wn-ease),color .22s var(--wn-ease);
}
.wn-404__btn:hover{background:var(--wn-green-800);color:var(--wn-white)}
.wn-404__btn--gold{background:var(--wn-gold);border-color:var(--wn-gold);color:var(--wn-white)}
.wn-404__btn--gold:hover{background:var(--wn-green-800);border-color:var(--wn-green-800)}
.wn-404__search{display:flex;gap:10px;justify-content:center;margin:44px auto 0;max-width:520px}
.wn-404__search input{
  flex:1 1 auto;min-width:0;padding:15px 20px;border-radius:999px;
  border:1px solid rgba(13,49,31,.25);background:var(--wn-white);
  font-family:var(--wn-sans);font-size:16px;color:var(--wn-green-800);
}
.wn-404__search input:focus{outline:2px solid var(--wn-spring);outline-offset:2px}
.wn-404__search button{
  padding:15px 30px;border:0;border-radius:999px;background:var(--wn-green-800);
  font-family:var(--wn-sans);font-size:14px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wn-white);cursor:pointer;
}
.wn-404__search button:hover{background:var(--wn-gold)}
@media (max-width:760px){
  .wn-404{padding:64px 0 88px}
  .wn-404__search{flex-direction:column;align-items:stretch}
}

/* Once the /404/ page carries its own content, that content is the page: the
   built-in numeral would otherwise sit above whatever the client builds. */
.wn-404:has(.wn-404__editable) .wn-404__code{display:none}
.wn-404__editable .wn-brandmark-wrap{margin-bottom:26px}

/* ====================================================== waitlist web form ==
   The Keap/Infusionsoft form embedded on /membership/#waitlist arrives with no
   styling of its own - system font, grey hairline boxes, a pink Submit - so it
   is dressed here to match the newsletter form and the site's buttons. Scoped
   to .infusion-form so the footer subscribe bar (.wn-subscribe) is untouched. */
.infusion-form:not(.wn-subscribe){
  width:100%;max-width:680px;margin-inline:auto;
  font-family:var(--wn-sans);color:var(--wn-green-800);
}
/* Every field is a direct child of one .infusion-field-container - there are no
   per-field wrappers - so the gap is set on the container itself. */
.infusion-form:not(.wn-subscribe) .infusion-field-container{
  display:flex;flex-direction:column;gap:14px;
}
/* The theme reset carries `background: transparent !important; color: #000
   !important` on every element, and its own input and button rules on top, so
   colour here has to be stated just as firmly. */
.infusion-form:not(.wn-subscribe) :is(input[type="text"],input[type="email"],input[type="tel"],select){
  width:100%;padding:16px 20px;
  border:1px solid rgba(13,49,31,.28);border-radius:999px;
  background:var(--wn-white) !important;
  font-family:var(--wn-sans);font-size:16px;font-weight:450;
  color:var(--wn-green-800) !important;
  transition:border-color .2s var(--wn-ease);
}
.infusion-form:not(.wn-subscribe) select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230C311F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 22px center;background-size:12px 8px;
  padding-right:52px;
}
.infusion-form:not(.wn-subscribe) :is(input,select):focus{
  outline:2px solid var(--wn-spring);outline-offset:2px;border-color:transparent;
}
.infusion-form:not(.wn-subscribe) ::placeholder{color:rgba(13,49,31,.55);opacity:1}

/* the two consent lines: a proper tick box beside readable copy */
/* The tick box and its text are siblings inside span.infusion-checkbox, so the
   span is the row - putting the flex on the label only left the box stranded on
   a line of its own. */
.infusion-form:not(.wn-subscribe) .infusion-checkbox-wrapper{margin:2px 0 0}
.infusion-form:not(.wn-subscribe) .infusion-checkbox{
  display:flex;align-items:flex-start;gap:12px;
}
.infusion-form:not(.wn-subscribe) .checkbox-label{
  margin:0;font-size:16px;font-weight:450;line-height:1.45;
  color:var(--wn-green-800) !important;cursor:pointer;
}
.infusion-form:not(.wn-subscribe) input[type="checkbox"]{
  flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--wn-spring);cursor:pointer;
}

.infusion-form:not(.wn-subscribe) .infusion-submit{margin-top:12px;text-align:center}
.infusion-form:not(.wn-subscribe) button[type="submit"]{
  width:100% !important;max-width:340px;padding:20px 44px;border:0;border-radius:999px;
  background:var(--wn-gold) !important;color:var(--wn-white) !important;cursor:pointer;
  font-family:var(--wn-sans);font-size:17px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .22s var(--wn-ease);
}
.infusion-form:not(.wn-subscribe) button[type="submit"]:hover{background:var(--wn-green-800) !important}
@media (max-width:760px){
  .infusion-form:not(.wn-subscribe) button[type="submit"]{max-width:100%}
}

/* ======================================================== mobile pass, Sept 15 ==
   Client review on a phone: headings too large, too much space between sections,
   a gap under the image slider, and hero buttons sitting left of centre. These
   are site-wide caps rather than per-page edits, so every Elementor page follows
   the same rhythm on a phone without re-importing anything.

   Safe to scope by tag: every large heading in these builds is an h1/h2 set in
   Instrument Serif, while labels, sub-nav items and card meta are p/h3 in
   Figtree - so nothing small is enlarged by these rules. */
@media (max-width:767px){

  /* 1. headings: nothing larger than 40px on a phone (62-67px before) */
  .elementor-widget-heading h1.elementor-heading-title:not(#_){font-size:40px;line-height:1.08}
  .elementor-widget-heading h2.elementor-heading-title:not(#_){font-size:34px;line-height:1.1}
  .elementor-widget-heading h3.elementor-heading-title:not(#_){font-size:23px;line-height:1.2}
  /* p headings are both small uppercase labels and large serif prices, so each
     one carries its own phone size (inc/mobile-type.php): labels stop at 19px,
     under the 34px h2, and figures at 38px. Ones already small are untouched. */
  .wn-mob-p p.elementor-heading-title:not(#_){font-size:var(--wn-mob-p);line-height:1.3}
  .wn-mob-p--display p.elementor-heading-title:not(#_){line-height:1.1}
  /* desktop line breaks in headings strand single words at phone width */
  .elementor-heading-title br.wn-br:not(#_){display:none}

  /* A section holding only the button that overlaps the hero kept 48px of
     padding above and below it, which opened a gap under the hero. */
  .elementor > .e-con:has(> .e-con-inner > .elementor-widget-button:only-child):not(#_),
  .elementor > .e-con:has(> .elementor-widget-button:only-child):not(#_){
    --padding-block-start:0px;--padding-block-end:0px;
  }
  /* the NY Summit sideways "New York" strip collapses to nothing on a phone but
     its column still added 60px of gap above the heading */
  .e-con.e-child:has(> .elementor-widget-image img[src*="vertical-text"]):not(#_){display:none}
  /* Empty columns that only hold space for desktop artwork (the out-of-town
     circle, London Delegation's photo side) stack as a blank 20px row plus the
     row gap. Every such column on the site has no background of its own on a
     phone, so they are dropped. */
  .e-con.e-child:not(:has(.elementor-element)):not(#_){display:none}

  /* A page's own mobile typography setting is written per widget and outranks a
     plain class, so the h1/h2 caps are repeated at id weight for the heroes. */
  #mb-hero-over h1.elementor-heading-title:not(#_),
  #cf-hero-over h1.elementor-heading-title:not(#_),
  #hp-hero-copy h1.elementor-heading-title:not(#_){font-size:38px;line-height:1.08}

  /* 2. the space between sections: Elementor keeps container padding in custom
        properties, so capping those reaches every page at once. 88px pairs were
        common; 48px reads as generous on a 390px screen. */
  .elementor > .e-con:not(#_){
    --padding-block-start:min(var(--wn-mob-pad,48px),48px);
    --padding-block-end:min(var(--wn-mob-pad,48px),48px);
  }
  /* full-bleed heroes keep their own zero padding */
  #cf-hero:not(#_),#mb-hero:not(#_),#ab-hero:not(#_),#hp-hero:not(#_),
  #ty-hero:not(#_),#wl-hero:not(#_),#ls-hero:not(#_){
    --padding-block-start:0px;--padding-block-end:0px;
  }

  /* 3. the slider: the arrows hang 58px below the slides on desktop, which left
        a tall empty box under the photo on a phone. The arrows are hidden there
        (the strip swipes), so the box closes up. */
  .wn-carousel-1 .elementor-swiper-button:not(#_){display:none}
  /* the swiper keeps the desktop height Elementor wrote for it, which is what
     left the empty band under the photo - height:auto lets it wrap the slide */
  .wn-carousel-1 .elementor-main-swiper:not(#_),
  .wn-carousel-1 .swiper:not(#_),
  .wn-carousel-1 .swiper-wrapper:not(#_),
  .wn-carousel-1 .swiper-slide:not(#_){height:auto;padding-bottom:0}
  .wn-carousel-1:not(#_){margin-bottom:0}
  .wn-carousel-2 .elementor-main-swiper:not(#_),
  .wn-carousel-2 .swiper:not(#_),
  .wn-carousel-2 .swiper-wrapper:not(#_),
  .wn-carousel-2 .swiper-slide:not(#_){height:auto}

  /* 4. hero buttons: centred, and each one able to take the full column */
  #cf-hero-over .elementor-widget-button:not(#_),
  #mb-hero-over .elementor-widget-button:not(#_),
  #hp-hero-copy .elementor-widget-button:not(#_){width:100%;max-width:340px;margin-inline:auto}
  #cf-hero-over .elementor-button:not(#_),
  #mb-hero-over .elementor-button:not(#_),
  #hp-hero-copy .elementor-button:not(#_){width:100%;justify-content:center;text-align:center}
}

/* ============================================= rows at laptop widths, Sept 16 ==
   Percentage columns plus a fixed gap overflow their row below ~1300px and the
   last column wraps under the others (inc/mobile-type.php marks the rows whose
   columns are meant to share one line). Holding the row to one line lets the
   columns shrink to make room for the gap instead. */
@media (min-width:768px){
  .wn-fit-row.e-con-full:not(#_),
  .wn-fit-row > .e-con-inner:not(#_){--flex-wrap:nowrap;flex-wrap:nowrap}
  .wn-fit-row.e-con-full > .e-con:not(#_),
  .wn-fit-row > .e-con-inner > .e-con:not(#_){min-width:0}
}
@media (min-width:1025px){
  .wn-fit-row--desk.e-con-full:not(#_),
  .wn-fit-row--desk > .e-con-inner:not(#_){--flex-wrap:nowrap;flex-wrap:nowrap}
  .wn-fit-row--desk.e-con-full > .e-con:not(#_),
  .wn-fit-row--desk > .e-con-inner > .e-con:not(#_){min-width:0}
}