.elementor-12684 .elementor-element.elementor-element-6b40c0e{--display:flex;}.elementor-12684 .elementor-element.elementor-element-6b40c0e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-12684 .elementor-element.elementor-element-0ac5d36{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-12684 .elementor-element.elementor-element-81b6dbb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12684 .elementor-element.elementor-element-ac83be6{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12684 .elementor-element.elementor-element-46611f6{--display:flex;}.elementor-12684 .elementor-element.elementor-element-f43b26d{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-12684 .elementor-element.elementor-element-c5f80d4{--display:flex;}@media(max-width:1024px){.elementor-12684 .elementor-element.elementor-element-f43b26d{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-12684 .elementor-element.elementor-element-6b40c0e{--width:110.058%;}.elementor-12684 .elementor-element.elementor-element-81b6dbb{--width:50%;}.elementor-12684 .elementor-element.elementor-element-ac83be6{--width:41%;}}@media(max-width:767px){.elementor-12684 .elementor-element.elementor-element-f43b26d{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS *//* BUILD post-v5.0 | Work Is Changing | brand type and palette, quotes on their
 * own grounds
 *
 * Type: Avenir Next LT Pro throughout. Headline regular (400), subheads and
 * labels demi (600), body and list items regular (400). If the face is not yet
 * loaded site-wide, add it under Elementor > Site Settings > Custom Fonts —
 * the stack below falls back to Avenir Next, then Helvetica Neue, which keeps
 * the proportions close but is not identical.
 *
 * Colour: the five primaries, plus the neutral grounds carried over from the
 * earlier drafts. No accent outside the brand list.
 *
 * Layout follows the Work for What's Next email templates: washed photo hero,
 * neutral colour blocks running full width, photographs in even grids, white
 * rounded cards for grouped items.
 *
 * TEXT: every word in the markup is from the published post.
 */

.or-post {
  /* Brand primaries */
  --or-slate:   #023047;
  --or-steel:   #114B5F;
  --or-brass:   #B08D57;
  --or-mist:    #BEC7CD;
  --or-canvas:  #F8F6F2;

  /* Neutral grounds and text */
  --or-white:     #FFFFFF;
  --or-sand:      #EDE7DD;   /* warm neutral block */
  --or-mistwash:  #E5EAEC;   /* mist lightened to work behind text */
  --or-ink:       #2D2D2D;
  --or-ink-soft:  #55605F;
  --or-line:      #DCD8D0;

  --or-font: "Avenir Next LT Pro", "Avenir Next", Avenir, "Segoe UI",
             "Helvetica Neue", Helvetica, Arial, sans-serif;

  --or-max:    1180px;
  --or-col:    680px;
  --or-gutter: clamp(18px, 4vw, 52px);
  --or-block:  clamp(52px, 6vw, 96px);
  --or-gap:    clamp(8px, 1vw, 14px);

  background: var(--or-white);
  color: var(--or-ink);
  font-family: var(--or-font);
  font-weight: 400;
  line-height: 1.75;
}

.or-post, .or-post *, .or-post *::before, .or-post *::after { box-sizing: border-box; }
.or-post img { display: block; max-width: 100%; height: auto; }
.or-post figure { margin: 0; padding: 0; }
.or-post p { margin: 0; padding: 0 0 1.15em; }
.or-post p:last-child { padding-bottom: 0; }

.or-post h1, .or-post h2 {
  margin: 0;
  padding: 0;
  font-family: var(--or-font);
  font-weight: 400;          /* headline: regular */
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--or-slate);
  text-wrap: balance;
}

/* NOTE ON SPECIFICITY: the base reset `.or-post p` is a type body.elementor-page-12684, so it
   outranks any single-class paragraph modifier and silently wins on the padding
   shorthand. Paragraph classes that set their own spacing are written as
   `.or-post p.or-post__x` below. Keep the pattern if you add one. */

/* Add `or-post--breakout` to the root div only if the Elementor container is
   boxed and the colour blocks should run to the viewport edge. */
.or-post--breakout {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* -------------------------------------------------------------- Measures */

.or-post__wrap {
  width: 100%;
  max-width: var(--or-max);
  margin: 0 auto;
  padding-left: var(--or-gutter);
  padding-right: var(--or-gutter);
}

.or-post__col { max-width: var(--or-col); margin-left: auto; margin-right: auto; }

.or-post__block { padding-top: var(--or-block); padding-bottom: var(--or-block); }
.or-post__block--canvas { background: var(--or-canvas); }
.or-post__block--sand   { background: var(--or-sand); }
.or-post__block--mist   { background: var(--or-mistwash); }
.or-post__block--tight  { padding-top: clamp(28px, 3.2vw, 48px); padding-bottom: clamp(28px, 3.2vw, 48px); }
.or-post__block--opening { padding-bottom: clamp(40px, 4.4vw, 70px); }

/* ------------------------------------------------------------------ Type */

.or-post__kicker {
  color: var(--or-brass);
  font-size: 0.78rem;
  font-weight: 600;          /* demi */
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Section heading. Written as `.or-post h2.or-post__heading` because the base
   `.or-post h1, .or-post h2` rule sets weight 400 and would otherwise flatten
   the demi. */
.or-post h2.or-post__heading {
  padding: 0;
  color: var(--or-slate);
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

/* Section opener. Demi, per the subhead spec. */
.or-post__display {
  color: var(--or-slate);
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.or-post__center { text-align: center; }
.or-post__center .or-post__display,
.or-post__center p { margin-left: auto; margin-right: auto; }

.or-post__body { font-size: clamp(1.05rem, 1.15vw, 1.18rem); line-height: 1.75; }

.or-post em { font-style: italic; }

.or-post a { color: var(--or-steel); text-decoration-color: rgba(17,75,95,0.45); text-underline-offset: 3px; }
.or-post a:hover { color: var(--or-slate); text-decoration-color: currentColor; }
.or-post :focus-visible { outline: 2px solid var(--or-brass); outline-offset: 3px; }

/* Written as `.or-post hr.or-post__rule` on purpose. WordPress themes almost
   always style bare `hr`, and a single-class body.elementor-page-12684 loses to `.entry-content
   hr` and friends — which is what flattened this rule on staging. */
.or-post hr.or-post__rule {
  display: block;
  width: 72px;
  height: 2px;
  margin: 1.35rem auto;
  padding: 0;
  border: 0;
  border-top: 0;
  background: var(--or-brass);
  opacity: 1;
}
.or-post hr.or-post__rule--mist { background: var(--or-mist); }

/* ------------------------------------------------------------------ Hero */
/* Pale scrim over the photograph, so the headline reads in slate on a light
   field rather than white on a dark one. */

.or-post__hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 42vw, 540px);
  padding-top: clamp(56px, 6vw, 92px);
  padding-bottom: clamp(56px, 6vw, 92px);
  background-color: var(--or-canvas);
  background-position: center 58%;
  background-size: cover;
  text-align: center;
}

/* The headline runs wider than the reading measure, so the hero gets its own
   wrap width. Line two is 44 characters — if Avenir sets it wider than this
   allows and it wraps to three lines, drop the 3.4vw below to about 3.1vw. */
.or-post__hero .or-post__wrap { max-width: 1280px; }

.or-post__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(248,246,242,0.80) 0%, rgba(248,246,242,0.88) 45%, rgba(248,246,242,0.94) 100%);
}

.or-post p.or-post__hero-kicker { padding: 0 0 1.5rem; }

.or-post__hero h1 {
  margin: 0 auto;
  padding: 0 0 0.2rem;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.18;
}

/* Two lines by design. Each line is its own block, so the break holds on
   desktop and the second line is still free to wrap on a phone. */
.or-post__hero h1 span { display: block; }

.or-post p.or-post__hero-deck {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0;
  color: var(--or-steel);
  font-size: clamp(1.08rem, 1.3vw, 1.28rem);
  font-weight: 600;          /* subhead: demi */
}

/* --------------------------------------------------------- Photo layouts */

/* The aspect ratio and the neutral ground sit on the FIGURE, not the image.
   That way a slow or missing file leaves a quiet canvas block of the right
   shape instead of collapsing the grid and dumping alt text across the page. */
.or-post__frame {
  overflow: hidden;
  background: var(--or-canvas);
}
.or-post__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Opening row: the sentence that names the book, with the book beside it.
   Text takes roughly two thirds; the photograph is supporting evidence at this
   size, not the subject of the section. */
.or-post__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 215px);
  gap: clamp(22px, 2.4vw, 38px);
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
  padding-top: clamp(12px, 1.4vw, 22px);
  text-align: left;
}
.or-post__intro .or-post__frame { aspect-ratio: 3 / 4; }

/* Paired portraits. Both source frames are vertical, so the grid is set to a
   portrait ratio — a landscape crop cut the top off the guest book sign. */
.or-post__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--or-gap);
  max-width: 880px;
  margin: 0 auto;
}
.or-post__grid .or-post__frame { aspect-ratio: 3 / 4; }
.or-post__grid img { object-position: center; }

.or-post__figure--wide { aspect-ratio: 16 / 9; }
.or-post__figure--wide img { object-position: center 62%; }

.or-post__figure--group { aspect-ratio: 3 / 2; }
.or-post__figure--group img { object-position: center 52%; }

/* ------------------------------------------------------------ Word lists */

.or-post__words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 1.1rem;
  margin: 0;
  padding: 0.35rem 0 0;
  list-style: none;
}

.or-post__words li {
  color: var(--or-steel);
  font-size: clamp(1.2rem, 1.9vw, 1.65rem);
  font-weight: 600;
  line-height: 1.35;
}
.or-post__words li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 1.1rem;
  vertical-align: 0.3em;
  border-radius: 50%;
  background: var(--or-mist);
}

.or-post p.or-post__words-cue {
  padding: 0 0 0.25rem;
  color: var(--or-ink-soft);
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------- Quotes */
/* Each quote sits in its own panel on its own ground, with space above and
   below, rather than running on directly from the paragraph. Three grounds are
   in rotation so consecutive quotes never match. */

.or-post__quote {
  margin: 0;
  padding: clamp(30px, 3.6vw, 52px) clamp(24px, 3.4vw, 56px);
  border: 0;
  background: var(--or-mistwash);
  text-align: center;
}

.or-post__quote p {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  color: var(--or-slate);
  font-size: clamp(1.28rem, 1.95vw, 1.68rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.or-post__quote--sand { background: var(--or-sand); }

.or-post__quote--slate { background: var(--or-slate); }
.or-post__quote--slate p { color: var(--or-white); }

/* Lead-in above the closing quote. Doubled body.elementor-page-12684 so `.or-post__quote p`
   does not flatten it back to display size. */
.or-post__quote p.or-post__quote-lead {
  max-width: 40rem;
  padding: 0 0 1rem;
  color: rgba(255,255,255,0.74);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  font-weight: 400;
  line-height: 1.65;
}

/* Short brass rule above the quote text, as in the email dividers. */
.or-post__quote::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 auto clamp(20px, 2.2vw, 30px);
  background: var(--or-brass);
}

/* Spacing when a quote follows a paragraph inside the same block. */
.or-post__quote-gap { padding-top: clamp(30px, 3.6vw, 52px); }

/* ----------------------------------------------------------------- Cards */

.or-post__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  padding-top: clamp(26px, 3vw, 40px);
}

.or-post__cards--five .or-post__card:last-child { grid-column: 1 / -1; }

.or-post__card {
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 14px;
  background: var(--or-white);
  box-shadow: 0 2px 12px rgba(2,48,71,0.07);
}
.or-post__block--tight .or-post__card,
.or-post__card--onwhite { background: var(--or-canvas); box-shadow: none; }

.or-post__card-num {
  display: block;
  padding-bottom: 0.7rem;
  color: var(--or-brass);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.or-post__card p {
  padding: 0;
  color: var(--or-slate);
  font-size: clamp(1.12rem, 1.35vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
}

/* ----------------------------------------------------------------- Stats */

.or-post__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 52px);
  padding-top: clamp(34px, 3.8vw, 52px);
  text-align: center;
}

.or-post__stat { padding-top: 1.1rem; border-top: 2px solid var(--or-brass); }

.or-post__stat p {
  max-width: 30ch;
  margin: 0 auto;
  padding: 0;
  color: var(--or-ink);
  font-size: clamp(1.02rem, 1.1vw, 1.12rem);
  line-height: 1.6;
  /* Spreads the caption evenly across its lines instead of stranding the last
     word on a line by itself. */
  text-wrap: balance;
}

.or-post__stat p.or-post__stat-figure {
  padding: 0 0 0.4rem;
  color: var(--or-slate);
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* The sentence that closes the statistic pair. No rule above it — space alone
   separates it from the figures. The padding below carries what the rule and
   its margins used to occupy, so the gap is unchanged. */
.or-post__coda { padding-top: clamp(46px, 5vw, 72px); }

.or-post p.or-post__coda-line {
  max-width: 46ch;
  margin: 0 auto;
  padding: 0;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- Source */

.or-post__source { padding-top: clamp(34px, 3.8vw, 52px); padding-bottom: clamp(44px, 5vw, 76px); }

.or-post__source h2 {
  padding: 0 0 0.5rem;
  color: var(--or-steel);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.or-post__source p { color: var(--or-ink-soft); font-size: 0.95rem; line-height: 1.65; }

.or-post__fn {
  font-size: 0.72em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 760px) {
  .or-post__intro { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .or-post__intro .or-post__frame { max-width: 260px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .or-post__cards { grid-template-columns: minmax(0, 1fr); }
  .or-post__stats { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .or-post__figure--wide { aspect-ratio: 4 / 3; }
  .or-post__figure--group { aspect-ratio: 4 / 3; }
  .or-post__words { gap: 0.3rem 0.85rem; }
  .or-post__words li:not(:last-child)::after { margin-left: 0.85rem; }
}

@media (max-width: 460px) {
  .or-post__grid { grid-template-columns: minmax(0, 1fr); max-width: 340px; }
  .or-post__grid .or-post__frame { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .or-post *, .or-post *::before, .or-post *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}/* End custom CSS */