/** Site Theme Tokens **/

:root {
    --core-site-font-body: 'Inter Tight', system-ui, sans-serif;
    --core-site-heading-font: 'Fraunces', Georgia, 'Times New Roman', serif;
    --core-site-color-text: var(--color-ink);
    --core-accent: var(--color-brass);
    --base-content-section-max-width: 1180px;
}
body { font-family: var(--core-site-font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--core-site-heading-font); }
body { color: var(--core-site-color-text); }


/** Site Custom Stylesheet (From File) **/ 



 /** Site Custom Styles (From DB) **/ 

/* ============================================================
   Purpose First — site-wide styles
   Palette, shared editorial components, reveal animation.
   ============================================================ */ :root  {
  /* Warm bone — the page ground. Only darker variants make sense. */ --color-bone:#F4F0E8;
  --color-bone-light:#FAF8F4;
  --color-bone-shade:#EDE9E1;
  /* Deep ink navy — primary brand colour, headings and body ink. */ --color-ink:#1C2A3A;
  --color-ink-rule:rgba(28,42,58,.16);
  --color-ink-rule-strong:rgba(28,42,58,.32);
  /* Warm grey — secondary text, clears 4.5:1 on bone. */ --color-warm-grey:#5A5346;
  /* Aged brass — reserved for the primary action and accents. */ --color-brass:#B08D57;
  --color-brass-dark:#9C7A46;
  --color-brass-deep:#8C6A2E;
  --color-brass-darkest:#785A28;
  --color-error:#8C3A2A;
  --color-white:#ffffff;
  --color-brand:var(--color-ink);
  --color-text:var(--color-ink);
  --color-bg:var(--color-bone);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',system-ui,sans-serif;
  --measure:68ch;
  --pad:clamp(1.5rem,6vw,8rem);
  /* The comp caps content at 1180px (set via the theme's content width)
     WITH its own gutter inside that cap: sections carry no outer padding,
     the gutter lives on the inner wrapper (rule below). */ --base-content-section-padding-x:0;
}
/* Background utilities — populate the section background dropdown. */ .bg-bone  {
  background-color:var(--color-bone)
}
.bg-bone-light  {
  background-color:var(--color-bone-light)
}
.bg-bone-shade  {
  background-color:var(--color-bone-shade)
}
.bg-ink  {
  background-color:var(--color-ink)
}
.bg-white  {
  background-color:var(--color-white)
}
/* Gutter inside the 1180px cap (see :root note above). */ .content-section-inner  {
  padding-inline:var(--pad)
}
/* ---- Base typography & resets ---- */ body  {
  background-color:var(--color-bone);
  overflow-x:clip;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
h1,h2,h3  {
  margin:0;
  font-weight:400;
  letter-spacing:-.01em
}
p  {
  margin:0
}
a  {
  color:inherit;
  text-decoration:none
}
a:focus-visible,button:focus-visible  {
  outline:2px solid var(--color-brass);
  outline-offset:3px;
  border-radius:2px
}
::selection  {
  background:var(--color-brass);
  color:var(--color-bone)
}
html  {
  scroll-behavior:smooth
}
@media (prefers-reduced-motion:reduce)  {
  html  {
    scroll-behavior:auto
  }
}
.skip-link  {
  position:absolute;
  left:-999px
}
.is-hidden  {
  display:none
}
/* ---- Shared editorial components (used across many sections) ---- */ .dot  {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-ink);
  vertical-align:middle
}
.eyebrow  {
  font-size:.8125rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--color-warm-grey);
  display:inline-flex;
  align-items:center;
  gap:.7em
}
.eyebrow .dot  {
  display:none
}
.btn  {
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  cursor:pointer;
  border:none;
  padding:.85em 1.5em;
  border-radius:3px;
  line-height:1;
  white-space:nowrap;
  transition:background .2s cubic-bezier(.2,.8,.2,1),transform .2s
}
.btn-primary  {
  background:var(--color-brass-deep);
  color:var(--color-white)
}
.btn-primary:hover  {
  background:var(--color-brass-darkest);
  color:var(--color-white);
  transform:translateY(-1px)
}
.btn-primary:active  {
  transform:translateY(0)
}
.btn-sm  {
  padding:.62em 1.05em;
  font-size:.92rem
}
.btn .arrow  {
  font-family:var(--serif);
  font-weight:300
}
.sec-h  {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.7rem,3.1vw,2.6rem);
  line-height:1.12;
  letter-spacing:-.02em;
  max-width:14ch
}
.body-copy  {
  max-width:var(--measure);
  font-size:1.12rem;
  color:var(--color-warm-grey)
}
.body-copy strong  {
  color:var(--color-ink);
  font-weight:600
}
.lead-2col  {
  display:grid;
  gap:clamp(1.6rem,4vw,4.5rem);
  grid-template-columns:1fr
}
@media(min-width:900px)  {
  .lead-2col  {
    grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    align-items:start
  }
}
.cap-name  {
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--color-ink)
}
.cap-role  {
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--color-warm-grey)
}
.cap-quals  {
  flex:0 0 100%;
  margin-top:-.3rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:.92rem;
  line-height:1.4;
  color:var(--color-warm-grey);
  text-align:center
}
.word  {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--serif);
  font-size:1.32rem;
  font-weight:500;
  letter-spacing:-.02em;
  text-decoration:none;
  white-space:nowrap
}
.word-img  {
  gap:0
}
.word .mark-img  {
  height:28px;
  width:auto;
  display:block;
  flex:0 0 auto
}
.lockup-img  {
  display:block;
  width:auto;
  height:38px
}
.trust  {
  font-size:.95rem;
  color:var(--color-warm-grey);
  letter-spacing:.01em
}
/* ---- Scroll reveal (paired with the scroll-reveal JS snippet) ---- */ .reveal.force  {
  opacity:1 !important;
  animation:none !important
}
@media (prefers-reduced-motion:no-preference)  {
  .reveal  {
    opacity:0
  }
  .reveal.in  {
    animation:pf-rise .65s cubic-bezier(.2,.8,.2,1) both
  }
}
@keyframes pf-rise  {
  from  {
    opacity:0;
    transform:translateY(12px)
  }
  to  {
    opacity:1;
    transform:none
  }
}


 /** Content Section Styles **/ 

.content-section-3070  {
  .content-section-inner  {
    max-width: calc(var(--base-content-section-max-width) * 1.163);
  }
  /* Frosted sticky bar — blur lives on a ::before layer so the fixed mobile
   menu overlay is not trapped by a backdrop-filter containing block. */ &.content-section  {
    position:sticky;
    top:0;
    z-index:20;
    background:color-mix(in srgb,var(--color-bone) 88%,transparent);
    border-bottom:1px solid var(--color-ink-rule)
  }
  &.content-section::before  {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    pointer-events:none
  }
  .content-section-inner  {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding-block:1.05rem;
    transition:padding .28s cubic-bezier(.2,.8,.2,1)
  }
  .word  {
    transform-origin:left center;
    transition:transform .28s cubic-bezier(.2,.8,.2,1)
  }
  .content-section-inner.shrunk  {
    padding-block:.4rem
  }
  .content-section-inner.shrunk .word  {
    transform:scale(.76)
  }
  .lockup-img  {
    height:40px;
    position:relative;
    top:4px
  }
  .btn-sm  {
    height:43px;
    padding:9px 24px
  }
  /* Nav link underline + scroll-spy active state (desktop bar only) */ .core-menu:not(.is-collapsed) .core-menu-link  {
    position:relative;
    padding-bottom:4px
  }
  .core-menu:not(.is-collapsed) .core-menu-link::after  {
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:0;
    height:1.5px;
    background:var(--color-brass);
    transition:right .25s cubic-bezier(.2,.8,.2,1)
  }
  .core-menu:not(.is-collapsed) .core-menu-link.active  {
    color:var(--color-ink);
    font-weight:600
  }
  .core-menu:not(.is-collapsed) .core-menu-link.active::after  {
    right:0
  }
  /* Collapsed header: hamburger to the far right, CTA beside it on its inner side */ .core-menu.is-collapsed  {
    order:3
  }
  .core-menu.is-collapsed ~ .btn  {
    order:2;
    margin-left:auto
  }
  @media (prefers-reduced-motion:reduce)  {
    .content-section-inner,.word  {
      transition:none
    }
  }
  /* Source design breakpoint (599) doesn't align with the CMS columns — kept verbatim */ @media (max-width:599px)  {
    .content-section-inner  {
      gap:.8rem
    }
    .word  {
      font-size:22px;
      height:auto
    }
    .word .mark-img  {
      height:26px
    }
    .lockup-img  {
      height:26px;
      top:3px
    }
    .btn-sm  {
      padding:13px 14px;
      height:auto;
      font-size:.85rem
    }
    .content-section-inner.shrunk .word  {
      transform:scale(.9)
    }
  }
}
.content-section-3071  {
  padding-top: clamp(2.8rem, 5vw, 4.2rem);
  padding-bottom: 0;
  &.content-section  {
    border-top:1px solid var(--color-ink-rule)
  }
  .cols  {
    display:grid;
    gap:2.4rem;
    grid-template-columns:1fr;
    align-items:start
  }
  .f-tag  {
    width:264px;
    max-width:34ch;
    font-size:1rem;
    color:var(--color-warm-grey);
    line-height:1.6
  }
  .f-tag .f-loc  {
    display:block;
    margin-top:.9rem;
    font-size:.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--color-warm-grey)
  }
  /* Footer nav — flat main menu laid out as the comp's 2×3 column-flow grid */ .core-menu[data-placement="footer"] .core-menu-list  {
    display:grid;
    grid-template-columns:repeat(2,auto);
    grid-template-rows:repeat(3,auto);
    grid-auto-flow:column;
    gap:.8rem 3.27rem;
    justify-content:center
  }
  .core-menu[data-placement="footer"] .core-menu-link  {
    width:fit-content;
    padding:0
  }
  .f-logo  {
    justify-self:start;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1.1rem
  }
  .f-logo .word  {
    height:auto;
    font-size:1.5rem
  }
  .f-logo .lockup-img  {
    height:52px
  }
  .legal  {
    margin-top:clamp(2.2rem,4vw,3.2rem);
    border-top:1px solid var(--color-ink-rule);
    padding-block:1.4rem;
    display:flex;
    flex-wrap:wrap;
    gap:.8rem 2rem;
    align-items:center;
    justify-content:space-between;
    font-size:.88rem;
    color:var(--color-warm-grey)
  }
  .legal a  {
    color:var(--color-warm-grey);
    text-decoration:none
  }
  .legal a:hover  {
    color:var(--color-ink)
  }
  .legal .legal-right  {
    display:flex;
    align-items:center;
    gap:1.6rem
  }
  .legal .legal-linkedin  {
    display:inline-flex;
    align-items:center;
    gap:.45em;
    color:var(--color-warm-grey);
    font-weight:600;
    transition:color .2s
  }
  .legal .legal-linkedin svg  {
    color:var(--color-brass);
    flex:0 0 auto
  }
  .legal .legal-linkedin:hover,.legal .legal-linkedin:hover svg  {
    color:var(--color-ink)
  }
  /* Source design breakpoints (860/599) don't align with the CMS columns — kept verbatim */ @media(min-width:860px)  {
    .cols  {
      grid-template-columns:auto auto auto;
      justify-content:space-between;
      gap:2rem
    }
    .f-logo  {
      justify-self:end;
      align-items:flex-end
    }
  }
  @media (max-width:599px)  {
    .cols  {
      gap:1.9rem
    }
    .legal  {
      justify-content:flex-start
    }
  }
}
.content-section-3072  {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  .hero-grid  {
    display:grid;
    gap:clamp(2rem,5vw,4.5rem);
    grid-template-columns:1fr;
    align-items:center
  }
  .eyebrow  {
    gap:7px;
    margin:0 0 16px
  }
  h1  {
    font-family:var(--serif);
    font-weight:300;
    font-size:clamp(2.4rem,4.6vw,4.3rem);
    line-height:1.05;
    letter-spacing:-.025em;
    max-width:15ch
  }
  h1 em  {
    font-style:italic;
    font-weight:400
  }
  .sub  {
    margin-top:1.9rem;
    max-width:42ch;
    font-size:1.2rem;
    color:var(--color-warm-grey);
    line-height:1.55
  }
  .cta  {
    margin-top:2.6rem;
    display:flex;
    align-items:center;
    gap:1.4rem;
    flex-wrap:wrap
  }
  .cta .btn  {
    padding:14px 24px;
    font-size:.92rem
  }
  .hero-figure  {
    margin:0
  }
  .hero-figure .frame  {
    position:relative;
    overflow:hidden;
    border-radius:16px;
    border:1px solid var(--color-ink-rule);
    background:var(--color-bone);
    aspect-ratio:4/5
  }
  .hero-figure img  {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 30%
  }
  .hero-figure figcaption  {
    margin-top:1rem;
    display:flex;
    align-items:baseline;
    gap:.7rem;
    flex-wrap:wrap;
    text-align:left;
    width:420px;
    justify-content:center
  }
  /* Source design breakpoints (900/899/599) don't align with the CMS columns — kept verbatim */ @media(min-width:900px)  {
    .hero-grid  {
      grid-template-columns:minmax(0,.82fr) minmax(0,1fr)
    }
    .hero-grid .hero-copy  {
      transform:translateY(calc(var(--cap-offset,0px) / -2))
    }
  }
  @media(max-width:899px)  {
    .hero-grid .hero-copy  {
      order:-1
    }
    .hero-figure  {
      max-width:min(440px,100%);
      margin-inline:auto
    }
    .hero-figure figcaption  {
      width:100%;
      justify-content:center;
      text-align:center
    }
    .eyebrow  {
      margin-bottom:1rem
    }
  }
  @media (max-width:599px)  {
    .cta .btn  {
      width:100%;
      justify-content:center
    }
    .cta  {
      margin-top:1.9rem
    }
  }
}
.content-section-3073  {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  &.content-section  {
    border-top:1px solid var(--color-ink-rule);
    text-align:center
  }
  .ch-h  {
    font-family:var(--serif);
    font-weight:400;
    font-size:42px;
    letter-spacing:-.02em;
    line-height:1.05;
    color:var(--color-ink)
  }
  .ch-rule  {
    display:block;
    width:120px;
    height:1px;
    background:var(--color-ink);
    opacity:.55;
    margin:1.6rem auto clamp(2.4rem,5vw,3.6rem)
  }
  .ch-list  {
    list-style:none;
    margin:0 auto;
    padding:0;
    max-width:920px;
    display:grid;
    grid-template-columns:1fr;
    gap:1.7rem clamp(2.5rem,6vw,5.5rem);
    text-align:left
  }
  .ch-list li  {
    font-family:var(--serif);
    font-weight:400;
    font-size:21px;
    line-height:1.32;
    letter-spacing:-.01em;
    color:var(--color-warm-grey)
  }
  .ch-list li:nth-child(3)  {
    font-size:22px
  }
  .ch-cta  {
    margin-top:clamp(2.6rem,5vw,3.8rem)
  }
  .ch-cta .btn  {
    padding:16px 24px
  }
  /* Source design breakpoints (760/719/599) don't align with the CMS columns — kept verbatim */ @media(min-width:760px)  {
    .ch-list  {
      grid-template-columns:1fr 1fr;
      grid-auto-flow:column;
      grid-template-rows:repeat(3,auto)
    }
  }
  @media (max-width:719px)  {
    .ch-h  {
      font-size:clamp(1.85rem,8vw,2.5rem)
    }
    .ch-list li,.ch-list li:nth-child(3)  {
      font-size:1.15rem;
      line-height:1.45
    }
    .ch-rule  {
      margin:1.3rem auto 2rem
    }
  }
  @media (max-width:599px)  {
    .ch-cta .btn  {
      width:100%;
      justify-content:center
    }
  }
}
.content-section-3074  {
  padding-top: clamp(4.5rem, 10vw, 8rem);
  padding-bottom: clamp(4.5rem, 10vw, 8rem);
  &.content-section  {
    border-top:1px solid var(--color-ink-rule);
    text-align:center;
    position:relative
  }
  /* Full-bleed topo texture: absolutely positioned against the section (the inner wrapper stays unpositioned) */ .principle-tex  {
    position:absolute;
    inset:0;
    pointer-events:none;
    background:url('/site-assets/images/texture-topo-web.png') center / 760px repeat;
    opacity:.035
  }
  .content-section-inner > *:not(.principle-tex)  {
    position:relative
  }
  .eyebrow  {
    justify-content:center;
    margin-bottom:2.2rem
  }
  blockquote  {
    margin:-17px 116px 0;
    max-width:20ch;
    font-family:var(--serif);
    font-weight:300;
    font-size:clamp(2rem,5.2vw,3.9rem);
    line-height:1.1;
    letter-spacing:-.02em
  }
  .gloss  {
    margin:2.4rem auto 0;
    max-width:54ch;
    color:var(--color-warm-grey);
    font-size:1.12rem
  }
  .gloss strong  {
    color:var(--color-ink);
    font-weight:600;
    font-style:italic;
    font-family:var(--serif)
  }
  /* Source design breakpoint (719) doesn't align with the CMS columns — kept verbatim.
   The padding override here is a breakpoint override of the custom padding setting. */ @media (max-width:719px)  {
    blockquote  {
      margin:0 auto;
      font-size:clamp(1.9rem,8.5vw,2.6rem)
    }
    &.content-section  {
      padding-block:clamp(3.2rem,12vw,4.5rem)
    }
  }
}
.content-section-3075  {
  &.content-section  {
    border-top:1px solid var(--color-ink-rule)
  }
  /* Full-bleed strip: cancel the site-wide inner gutter (padding only — the x-none preset already lifts the width cap) */ .content-section-inner  {
    padding-inline:0
  }
  .gallery-strip  {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:4px
  }
  .gallery-strip img  {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    aspect-ratio:4/5
  }
  .gallery-strip img:nth-child(1)  {
    object-position:50% 40%
  }
  .gallery-strip img:nth-child(2)  {
    object-position:30% 35%
  }
  .gallery-strip img:nth-child(3)  {
    object-position:60% 50%
  }
  .gallery-strip img:nth-child(4)  {
    object-position:35% 30%
  }
  .gallery-strip img:nth-child(5)  {
    object-position:50% 35%
  }
  /* Source design breakpoints (1100/719) don't align with the CMS columns — kept verbatim */ @media(min-width:1100px)  {
    .gallery-strip img  {
      aspect-ratio:3/4
    }
  }
  @media (max-width:719px)  {
    .gallery-strip  {
      display:flex;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none
    }
    .gallery-strip::-webkit-scrollbar  {
      display:none
    }
    .gallery-strip img  {
      flex:0 0 68vw;
      width:68vw;
      aspect-ratio:4/5;
      scroll-snap-align:center
    }
  }
}
.content-section-3076  {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  .lead-2col  {
    align-items:start
  }
  .lead-2col .body-copy p  {
    padding:0 0 35px
  }
  /* Restyle the core accordion to the comp's flush, hairline-ruled list */ .models  {
    margin-top:.5rem;
    border-top:1px solid var(--color-ink-rule)
  }
  .models > * + *  {
    margin-top:0
  }
  .models details  {
    padding:0;
    border-radius:0;
    border-bottom:1px solid var(--color-ink-rule)
  }
  .models details summary  {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1.3rem;
    padding:1.5rem 0;
    font-weight:400;
    font-size:inherit
  }
  .models details[open] summary  {
    margin-bottom:0
  }
  .model-num  {
    font-family:var(--serif);
    font-size:1.05rem;
    color:var(--color-ink);
    font-variant-numeric:tabular-nums;
    letter-spacing:0
  }
  .model-name  {
    font-family:var(--serif);
    font-size:clamp(1.3rem,2.4vw,1.85rem);
    font-weight:400;
    letter-spacing:-.015em;
    line-height:1.15
  }
  .models details summary::after  {
    font-family:var(--serif);
    font-size:1.6rem;
    font-weight:400;
    line-height:1;
    color:var(--color-warm-grey);
    position:static;
    justify-self:end;
    transition:transform .25s cubic-bezier(.2,.8,.2,1)
  }
  .models details p  {
    margin:0;
    padding:0 0 1.7rem;
    padding-left:calc(1.3rem + 2ch);
    max-width:54ch;
    color:var(--color-warm-grey);
    font-size:1.1rem
  }
  @media (prefers-reduced-motion:reduce)  {
    .models details summary::after  {
      transition:none
    }
  }
  /* Source design breakpoint (719) doesn't align with the CMS columns — kept verbatim */ @media (max-width:719px)  {
    .models details summary  {
      gap:1rem;
      padding:1.25rem 0
    }
    .models details p  {
      padding-left:0
    }
  }
}
.content-section-3077  {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  &.content-section  {
    border-top:1px solid var(--color-ink-rule);
    text-align:center
  }
  .eyebrow  {
    justify-content:center
  }
  .sec-h  {
    max-width:24ch;
    margin:20px 172px 0
  }
  .impact-line  {
    margin:1.4rem auto 0;
    max-width:var(--measure);
    font-size:1.12rem;
    color:var(--color-warm-grey)
  }
  .impact-figure  {
    margin:clamp(2.2rem,4.5vw,3.4rem) 0 0
  }
  .impact-frame  {
    overflow:hidden;
    border-radius:16px;
    border:1px solid var(--color-ink-rule);
    background:var(--color-bone);
    aspect-ratio:21/10
  }
  .impact-frame img  {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 28%
  }
  .impact-figure figcaption  {
    margin-top:.85rem;
    font-size:.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--color-warm-grey)
  }
  /* Source design breakpoint (719) doesn't align with the CMS columns — kept verbatim */ @media (max-width:719px)  {
    .sec-h  {
      margin:16px auto 0
    }
    .impact-frame  {
      aspect-ratio:4/3
    }
    .impact-line  {
      font-size:1.05rem
    }
  }
}
.content-section-3078  {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  &.content-section  {
    border-top:1px solid var(--color-ink-rule)
  }
  .lead-2col  {
    align-items:start
  }
  .lead-2col > div:nth-child(2)  {
    align-self:start;
    padding-top:calc(clamp(1.7rem,3.1vw,2.6rem)*1.12 + 1.8rem)
  }
  .about-plaque  {
    text-align:center
  }
  .about-plaque .sec-h  {
    margin-inline:auto
  }
  .about-portrait  {
    margin:1.8rem auto 0;
    max-width:300px
  }
  .about-portrait .frame  {
    overflow:hidden;
    border-radius:16px;
    border:1px solid var(--color-ink-rule);
    background:var(--color-bone);
    aspect-ratio:4/5
  }
  .about-portrait img  {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 22%
  }
  .about-portrait figcaption  {
    margin-top:.85rem;
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:.7rem;
    flex-wrap:wrap
  }
  .body-copy + .body-copy  {
    margin-top:1.4rem
  }
  .figures  {
    margin-top:clamp(2.5rem,5vw,4rem);
    display:grid;
    grid-template-columns:1fr;
    gap:1.6rem 0;
    border-top:1px solid var(--color-ink-rule);
    padding-top:clamp(2rem,4vw,3rem)
  }
  .figure .n  {
    font-family:var(--serif);
    font-size:clamp(2rem,4vw,2.9rem);
    font-weight:400;
    letter-spacing:-.02em;
    line-height:1
  }
  .figure .l  {
    margin-top:.5rem;
    font-size:.95rem;
    color:var(--color-warm-grey);
    max-width:24ch
  }
  /* Source design breakpoints (760/899/719) don't align with the CMS columns — kept verbatim */ @media(min-width:760px)  {
    .figures  {
      grid-template-columns:repeat(3,1fr)
    }
    .figure  {
      text-align:center;
      padding-inline:clamp(1rem,2.5vw,2.5rem)
    }
    .figure .l  {
      margin-inline:auto
    }
    .figure + .figure  {
      border-left:1px solid var(--color-ink-rule)
    }
  }
  @media(max-width:899px)  {
    .lead-2col > div:nth-child(2)  {
      padding-top:0
    }
  }
  @media (max-width:719px)  {
    .figures  {
      text-align:center
    }
    .figure .l  {
      margin-inline:auto
    }
    .figure + .figure  {
      border-top:1px solid var(--color-ink-rule);
      padding-top:1.5rem
    }
  }
}
.content-section-3079  {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  &.content-section  {
    border-top:1px solid var(--color-ink-rule)
  }
  .features-grid  {
    margin-top:clamp(2rem,4vw,3rem);
    display:grid;
    gap:clamp(1.6rem,3vw,2.4rem);
    grid-template-columns:1fr
  }
  .features-grid + .features-grid  {
    margin-top:clamp(1.6rem,3vw,2.4rem)
  }
  .feat  {
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
    background:var(--color-bone);
    border:1px solid var(--color-ink-rule);
    border-radius:4px;
    overflow:hidden;
    transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s
  }
  .feat:hover  {
    transform:translateY(-3px);
    border-color:var(--color-ink-rule-strong);
    color:inherit
  }
  .feat:focus-visible  {
    outline:2px solid var(--color-brass);
    outline-offset:3px
  }
  .feat-img  {
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--color-warm-grey)
  }
  .feat-img img  {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    object-position:50% 40%
  }
  .feat-aicd .feat-img img  {
    object-position:50% 20%
  }
  .feat-fineart .feat-img img  {
    object-position:50% 30%
  }
  .feat-body  {
    padding:1.4rem 1.4rem 1.5rem;
    display:flex;
    flex-direction:column;
    gap:.55rem;
    flex:1
  }
  .feat-pub  {
    font-size:.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--color-warm-grey)
  }
  .feat-title  {
    font-family:var(--serif);
    font-weight:400;
    font-size:1.32rem;
    letter-spacing:-.015em;
    line-height:1.2
  }
  .feat-read  {
    margin-top:auto;
    padding-top:.6rem;
    font-size:.95rem;
    color:var(--color-ink);
    display:inline-flex;
    align-items:center;
    gap:.45em
  }
  .feat-read .arrow  {
    color:var(--color-brass);
    transition:transform .2s cubic-bezier(.2,.8,.2,1)
  }
  .feat:hover .feat-read .arrow  {
    transform:translateX(4px)
  }
  /* Source design breakpoint (720) doesn't align with the CMS columns — kept verbatim */ @media(min-width:720px)  {
    .features-grid  {
      grid-template-columns:repeat(3,1fr)
    }
  }
}
.content-section-3080  {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  &.content-section  {
    border-top:1px solid var(--color-ink-rule)
  }
  .video-wrap  {
    margin-top:clamp(2rem,4vw,3rem);
    position:relative;
    aspect-ratio:16/9;
    border-radius:6px;
    overflow:hidden;
    background:var(--color-ink);
    border:1px solid var(--color-ink-rule)
  }
  .video-wrap iframe  {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0
  }
  .video-poster  {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:0;
    padding:0;
    background:var(--color-ink);
    transition:opacity .3s
  }
  .video-poster img  {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 30%;
    opacity:.72
  }
  .video-poster .vp-btn  {
    position:relative;
    width:74px;
    height:74px;
    border-radius:50%;
    background:var(--color-brass);
    color:var(--color-ink);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s
  }
  .video-poster:hover .vp-btn  {
    transform:scale(1.07);
    background:var(--color-brass-dark)
  }
  .video-poster:focus-visible  {
    outline:2px solid var(--color-brass);
    outline-offset:3px
  }
  .video-poster.is-playing  {
    opacity:0;
    pointer-events:none
  }
}
.content-section-3081  {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  &.content-section  {
    border-top:1px solid var(--color-ink-rule)
  }
  .pods-list  {
    margin-top:clamp(2rem,4vw,3rem);
    border-top:1px solid var(--color-ink-rule)
  }
  .pod  {
    display:grid;
    grid-template-columns:1fr;
    gap:.4rem 2.5rem;
    padding:1.7rem 0;
    border-bottom:1px solid var(--color-ink-rule);
    align-items:start
  }
  .pod-show  {
    font-size:.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--color-warm-grey)
  }
  .pod-show .pod-date  {
    font-weight:400;
    letter-spacing:.06em;
    text-transform:none;
    margin-left:.9em
  }
  .pod-title  {
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(1.25rem,2.2vw,1.7rem);
    letter-spacing:-.015em;
    line-height:1.2;
    margin-top:.45rem;
    max-width:30ch
  }
  .pod-link  {
    justify-self:start;
    font-size:.98rem;
    color:var(--color-ink);
    text-decoration:none;
    border-bottom:1px solid var(--color-brass);
    padding-bottom:2px;
    white-space:nowrap;
    transition:color .2s,border-color .2s
  }
  .pod-link:hover  {
    color:var(--color-brass-dark);
    border-color:var(--color-brass-dark)
  }
  .pod-actions  {
    display:flex;
    align-items:center;
    gap:1rem;
    justify-self:start
  }
  .pod-play  {
    width:44px;
    height:44px;
    flex:0 0 auto;
    border:1px solid var(--color-brass);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--color-ink);
    transition:background .2s cubic-bezier(.2,.8,.2,1),color .2s
  }
  .pod-play svg  {
    display:block;
    margin-left:2px
  }
  .pod-play:hover  {
    background:var(--color-brass);
    color:var(--color-bone)
  }
  /* Source design breakpoints (860/719) don't align with the CMS columns — kept verbatim */ @media(min-width:860px)  {
    .pod  {
      grid-template-columns:1fr 300px
    }
    .pod-actions  {
      justify-self:stretch;
      justify-content:flex-start
    }
    .pod-link  {
      justify-self:end
    }
  }
  @media (max-width:719px)  {
    .pod-link  {
      white-space:normal;
      line-height:1.4
    }
    .pod-title  {
      max-width:none
    }
  }
}
.content-section-3082  {
  padding-top: clamp(4.5rem, 10vw, 8rem);
  padding-bottom: clamp(4.5rem, 10vw, 8rem);
  &.content-section  {
    border-top:1px solid var(--color-ink-rule);
    text-align:center;
    position:relative
  }
  /* Full-bleed topo texture: absolutely positioned against the section (the inner wrapper stays unpositioned) */ .close-tex  {
    position:absolute;
    inset:0;
    pointer-events:none;
    background:url('/site-assets/images/texture-topo-web.png') center / 760px repeat;
    opacity:.035
  }
  .content-section-inner > *:not(.close-tex)  {
    position:relative
  }
  .pull  {
    font-family:var(--serif);
    font-weight:300;
    font-size:clamp(1.8rem,4.4vw,3.2rem);
    line-height:1.14;
    letter-spacing:-.015em;
    margin:0 auto
  }
  .shape-line  {
    margin:20px 237px 0;
    max-width:50ch;
    color:var(--color-warm-grey);
    font-size:1.1rem
  }
  .cta  {
    margin:32px 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.85rem
  }
  .cta .btn  {
    padding:16px 24px
  }
  .cta .trust  {
    margin:0
  }
  /* Source design breakpoints (719/599) don't align with the CMS columns — kept verbatim.
   The padding override is a breakpoint override of the custom padding setting. */ @media (max-width:719px)  {
    .shape-line  {
      margin:20px auto 0;
      font-size:1.02rem
    }
    .pull br  {
      display:none
    }
    .pull  {
      font-size:clamp(1.55rem,7vw,2.2rem)
    }
    &.content-section  {
      padding-block:clamp(3.2rem,12vw,4.5rem)
    }
  }
  @media (max-width:599px)  {
    .cta .btn  {
      width:100%;
      justify-content:center
    }
  }
}