/* ============================================================
   RIDGEMARK FINANCIAL ADVISORY
   Master stylesheet, Oncord build
   Upload to: /media/website_designs/1/ridgemark.css
   Link in the design head with ?v=N and bump N on every replace.

   Ported from the Squarespace Code Injection build. Every rule that
   existed only to fight Squarespace has been removed: the header
   overrides, the section padding resets, the blog collection DOM,
   the native search block, the form block styling and the section
   seam fixes. All of it is replaced by markup we now own.

   CONTENTS
    1  Tokens, reset, shared type scale
    2  Site header and nav          .rm-head
    3  Hero                         .rm-hero
    4  Trust marquee                .rm-marquee
    5  Statement intro              .rm-intro
    6  Column row                   .rm-cols
    7  Sticky services              .rm-svc
    8  Impact band                  .rm-band
    9  Testimonial                  .rm-quote
   10  Journal teaser               .rm-journal
   11  Closing band                 .rm-close
   12  Footer                       .rm-footer
   13  Page header                  .rm-phead
   14  Services page                .rm-svchero .rm-svcstep
   15  How we work                  .rm-work
   16  People                       .rm-people
   17  Principles                   .rm-values
   18  Field Notes list             .rm-fn
   19  Field Notes filters          .rm-fnfilter
   20  Field Note article           .rm-post
   21  Contact + Oncord form reset  .rm-contact
   22  Animation layer              .rm-fx
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS, RESET, TYPE SCALE
   ------------------------------------------------------------ */
:root{
  /* Version marker. Check which file the browser actually has with:
       getComputedStyle(document.documentElement).getPropertyValue('--rm-css-version')
     If it does not say 6, the design is linking an older ?v= and
     nothing else is worth debugging. */
  --rm-css-version:22;

  --rm-navy:#152632;
  --rm-ink:#141F27;
  --rm-paper:#EBEDEA;
  --rm-cream:#F7F8F6;
  --rm-sage:#7C8A70;
  --rm-sage-tx:#5A6650;          /* darkened from #616D58 for contrast on cream */
  --rm-sage-lt:#9DAA92;          /* matched to the brand guidelines value */
  --rm-faded:#4E626F;            /* darkened from #627887 for legibility */
  --rm-faded-lt:#9FB0BC;         /* the light-on-navy equivalent */
  --rm-accent:#DC7D48;           /* terracotta, interaction only */
  --rm-font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --rm-ease:cubic-bezier(0.22,1,0.36,1);

  --rm-gutter:clamp(1.5rem,6vw,6rem);
  --rm-max:1360px;
  --rm-head-h:clamp(4.5rem,7vw,6rem);

  /* locked type scale */
  --rm-eyebrow:0.78rem;
  --rm-h1:clamp(2.4rem,5vw,3.7rem);
  --rm-h3:clamp(1.7rem,2.6vw,2.4rem);
  --rm-body:clamp(1rem,1.1vw,1.08rem);
  --rm-link:0.82rem;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* clip, not hidden: overflow-x:hidden silently kills every position:sticky */
  overflow-x:clip;
}
body{
  margin:0;
  /* Cream, not white. On the reference build the marquee band is
     separated from the sections around it by hairlines only, same
     fill, which only works if the page itself is cream. */
  background:var(--rm-cream);
  color:var(--rm-ink);
  font-family:var(--rm-font);
  font-size:var(--rm-body);
  line-height:1.6;
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
/* A broken image falls back to its width attribute as intrinsic width.
   Inside a grid track with a min-content floor that drags the whole
   grid wider than the page. min-width:0 on grid and flex children
   stops it, and every repeat() track below uses minmax(0,1fr). */
.rm-cols > *, .rm-people__grid > *, .rm-journal__grid > *,
.rm-quote__inner > *, .rm-svcstep__inner > *, .rm-values__inner > *,
.rm-contact__inner > *, .rm-fn__item > *, .rm-close__inner > *{min-width:0}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}

.rm-wrap{max-width:var(--rm-max);margin:0 auto;width:100%}
.rm-bg-navy{background:var(--rm-navy)}
.rm-bg-cream{background:var(--rm-cream)}
.rm-bg-white{background:#FFFFFF}
.rm-bg-paper{background:var(--rm-paper)}
.rm-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* ------------------------------------------------------------
   2. SITE HEADER AND NAV  (.rm-head)
   Replaces the entire Squarespace header module. This markup is
   ours, so there is no theme to override, no border to hunt down
   in five places and no gutter overflow to undo.

   States, set by ridgemark.js on <body>:
     .rm-dark-hero   page opens on a dark image reaching the top
     .rm-scrolled    scrolled past that image
   No script, no classes, solid bar with ink nav. Fails safe.
   ------------------------------------------------------------ */
.rm-head{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--rm-cream);
  transition:background-color .45s var(--rm-ease);
}
.rm-head__inner{
  max-width:none;width:100%;
  padding:clamp(.9rem,1.6vw,1.4rem) var(--rm-gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);
}
.rm-head__logo{display:flex;align-items:center;flex:none;text-decoration:none}
.rm-head__logo img{
  width:clamp(140px,13vw,178px);
  height:auto;
  /* An SVG with a viewBox and height:auto collapses to zero height
     inside a flex container in Safari. The min-height gives it a box
     to resolve against. */
  min-height:1px;
  transition:opacity .35s var(--rm-ease);
}
.rm-head__logo .rm-head__logo--light{display:none}

.rm-head__nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);margin-left:auto}
.rm-head__link{
  position:relative;
  font-size:1rem;font-weight:400;letter-spacing:.01em;
  color:var(--rm-ink);text-decoration:none;padding:4px 0;
  transition:color .4s var(--rm-ease);
}
.rm-head__link::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--rm-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--rm-ease);
}
.rm-head__link:hover::after{transform:scaleX(1)}
.rm-head__link[aria-current="page"]{font-weight:500}

.rm-head__cta{
  flex:none;margin-left:clamp(8px,1.5vw,20px);
  display:inline-flex;align-items:center;
  border-radius:999px;padding:.78em 1.7em;
  font-size:.82rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rm-ink);text-decoration:none;
  background:transparent;border:1px solid rgba(20,31,39,.35);
  transition:background-color .4s var(--rm-ease),color .4s var(--rm-ease),border-color .4s var(--rm-ease);
}
.rm-head__cta:hover{background:var(--rm-accent);border-color:var(--rm-accent);color:#fff}

/* burger, hidden above the breakpoint */
.rm-head__burger{
  display:none;flex:none;
  width:44px;height:44px;padding:0;margin-left:8px;
  background:transparent;border:0;cursor:pointer;
  align-items:center;justify-content:center;
}
.rm-head__burger span{
  display:block;position:relative;width:24px;height:1px;
  background:var(--rm-ink);
  transition:background-color .4s var(--rm-ease),transform .4s var(--rm-ease);
}
.rm-head__burger span::before,
.rm-head__burger span::after{
  content:'';position:absolute;left:0;width:24px;height:1px;
  background:var(--rm-ink);
  transition:transform .4s var(--rm-ease),background-color .4s var(--rm-ease);
}
.rm-head__burger span::before{top:-7px}
.rm-head__burger span::after{top:7px}

/* transparent state over a flush dark hero */
body.rm-dark-hero:not(.rm-scrolled) .rm-head{background:transparent}
body.rm-dark-hero:not(.rm-scrolled) .rm-head__link,
body.rm-dark-hero:not(.rm-scrolled) .rm-head__cta{color:var(--rm-cream)}
body.rm-dark-hero:not(.rm-scrolled) .rm-head__cta{border-color:rgba(247,248,246,.55)}
body.rm-dark-hero:not(.rm-scrolled) .rm-head__cta:hover{background:var(--rm-accent);border-color:var(--rm-accent);color:#fff}
body.rm-dark-hero:not(.rm-scrolled) .rm-head__burger span,
body.rm-dark-hero:not(.rm-scrolled) .rm-head__burger span::before,
body.rm-dark-hero:not(.rm-scrolled) .rm-head__burger span::after{background:var(--rm-cream)}
/* two-tone navy lockup disappears on a dark hero, so swap in the light file */
body.rm-dark-hero:not(.rm-scrolled) .rm-head__logo--dark{display:none}
body.rm-dark-hero:not(.rm-scrolled) .rm-head__logo--light{display:block}

/* only a flush hero page starts under the header. Every other page
   gets clearance, which is what the Squarespace :has() rule was
   compensating for from the other direction. */
.rm-main{padding-top:var(--rm-head-h)}
body.rm-flush-top .rm-main{padding-top:0}

/* mobile drawer */
@media (max-width:900px){
  .rm-head__burger{display:inline-flex}
  .rm-head__nav{
    position:fixed;top:0;right:0;bottom:0;
    width:min(88vw,380px);
    background:var(--rm-navy);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:clamp(18px,3vh,28px);
    padding:var(--rm-gutter);
    transform:translateX(100%);
    transition:transform .5s var(--rm-ease);
    z-index:1001;
  }
  /* drawer only hides once JS has proved it is alive */
  html:not(.rm-js) .rm-head__nav{position:static;width:auto;background:none;
    flex-direction:row;transform:none;padding:0;height:auto}
  body.rm-menu-open .rm-head__nav{transform:translateX(0)}
  .rm-head__nav .rm-head__link{
    font-size:1.4rem;color:var(--rm-cream);
  }
  body.rm-dark-hero:not(.rm-scrolled) .rm-head__nav .rm-head__link{color:var(--rm-cream)}
  .rm-head__cta{margin-left:0}
  .rm-head__nav .rm-head__cta{color:var(--rm-cream);border-color:rgba(247,248,246,.55)}
  body.rm-menu-open .rm-head__burger span{background:transparent}
  body.rm-menu-open .rm-head__burger span::before{transform:translateY(7px) rotate(45deg);background:var(--rm-cream)}
  body.rm-menu-open .rm-head__burger span::after{transform:translateY(-7px) rotate(-45deg);background:var(--rm-cream)}
  body.rm-menu-open .rm-head__burger{position:relative;z-index:1002}
  body.rm-menu-open{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .rm-head,.rm-head *{transition:none !important}
}


/* ------------------------------------------------------------
   3. HERO  (.rm-hero)
   Rounded contained image bleeding to the top of the page.
   Ported unchanged apart from the container: on Squarespace this
   needed section padding zeroed from three different wrappers.
   Here the design owns the container, so it just sits at the top.
   ------------------------------------------------------------ */
.rm-hero{
  padding:0 clamp(.75rem,1.5vw,1.5rem) clamp(.75rem,1.5vw,1.5rem);
  background:transparent;
}
.rm-hero__frame{
  position:relative;width:100%;
  min-height:clamp(560px,86vh,900px);
  border-radius:0 0 clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px);
  overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;
}
.rm-hero__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--rm-focus,50% 50%);z-index:0;
}
.rm-hero__frame::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(21,38,50,.55) 0%,rgba(21,38,50,.10) 35%,rgba(21,38,50,.10) 60%,rgba(21,38,50,.55) 100%),
    linear-gradient(105deg,rgba(21,38,50,.55) 0%,rgba(21,38,50,.20) 45%,rgba(21,38,50,.05) 75%);
}
.rm-hero__top{
  position:relative;z-index:2;width:100%;
  padding:clamp(7rem,11vw,10rem) clamp(1.5rem,5vw,5.5rem) 0;
}
.rm-hero__bottom{
  position:relative;z-index:2;width:100%;
  padding:0 clamp(1.5rem,5vw,5.5rem) clamp(2rem,4vw,3.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,4rem);align-items:end;
}
.rm-hero__headline{
  font-size:clamp(2.6rem,6.5vw,5.6rem);font-weight:500;
  letter-spacing:-.03em;line-height:.98;color:var(--rm-cream);max-width:16ch;
}
.rm-hero__cta{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-size:var(--rm-link);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.4);
  transition:gap .4s var(--rm-ease),border-color .4s var(--rm-ease);
}
.rm-hero__cta svg{transition:transform .4s var(--rm-ease)}
.rm-hero__cta:hover{gap:18px;border-bottom-color:var(--rm-accent)}
.rm-hero__cta:hover svg{transform:translateX(4px)}
.rm-hero__sub{
  align-self:end;justify-self:end;max-width:40ch;
  font-size:clamp(1rem,1.1vw,1.12rem);line-height:1.5;color:var(--rm-cream);
}
.rm-hero__scroll{
  align-self:end;display:inline-flex;align-items:center;gap:10px;
  font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rm-cream);opacity:.9;
}
.rm-hero__scroll svg{animation:rm-bob 2.2s var(--rm-ease) infinite}
@keyframes rm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

@media (max-width:860px){
  .rm-hero__frame{min-height:82vh;border-radius:0 0 14px 14px}
  .rm-hero__top{padding:clamp(5.5rem,18vw,7rem) clamp(1.25rem,5vw,1.75rem) 0}
  .rm-hero__bottom{grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:start;
    padding:0 clamp(1.25rem,5vw,1.75rem) clamp(2rem,8vw,3rem)}
  .rm-hero__sub{justify-self:start;max-width:none;order:-1;margin-bottom:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .rm-hero__scroll svg{animation:none}
}


/* ------------------------------------------------------------
   4. TRUST MARQUEE  (.rm-marquee)
   Duplicate the item list twice in the markup for a seamless loop.
   ------------------------------------------------------------ */
.rm-marquee{
  /* Transparent, not a colour. The band is meant to read as part of
     the page, separated only by the hairlines above and below. Naming
     a fill here means matching the page background in two places and
     they drift apart the moment one changes. */
  background:transparent;
  padding:clamp(1.75rem,3vw,2.75rem) 0;
  overflow:hidden;
  border-top:1px solid rgba(20,31,39,.08);
  border-bottom:1px solid rgba(20,31,39,.08);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.rm-marquee__track{display:flex;width:max-content;animation:rm-marquee 38s linear infinite}
.rm-marquee:hover .rm-marquee__track{animation-play-state:paused}
.rm-marquee__item{
  display:inline-flex;align-items:center;gap:clamp(2.5rem,5vw,5rem);
  padding:0 clamp(2.5rem,5vw,5rem);
  font-size:clamp(.95rem,1.1vw,1.05rem);font-weight:500;letter-spacing:.04em;
  color:var(--rm-ink);white-space:nowrap;
}
.rm-marquee__item::after{content:'';width:1px;height:1.1em;background:rgba(20,31,39,.2)}
.rm-marquee__item img{height:clamp(22px,2.4vw,32px);width:auto;opacity:.75}
@keyframes rm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .rm-marquee__track{animation:none;justify-content:center;flex-wrap:wrap;width:100%}
}


/* ------------------------------------------------------------
   5. STATEMENT INTRO  (.rm-intro)
   ------------------------------------------------------------ */
.rm-intro{
  max-width:var(--rm-max);margin:0 auto;
  padding:clamp(6rem,11vw,11rem) var(--rm-gutter) clamp(3rem,6vw,6rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(1.5rem,3vw,2.6rem);align-items:center;
}
.rm-intro__label{
  font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rm-sage);white-space:nowrap;align-self:center;text-align:right;
}
.rm-intro__statement{
  font-size:clamp(2.6rem,6vw,5.2rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.02;color:var(--rm-cream);max-width:16ch;
}
.rm-intro__statement .l2{color:var(--rm-sage)}
.rm-intro__support{
  grid-column:2;justify-self:end;max-width:48ch;
  margin-top:clamp(3rem,7vw,7rem);
  font-size:var(--rm-body);line-height:1.62;color:var(--rm-cream);
}
.rm-intro__support .eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rm-sage);margin-bottom:clamp(20px,2vw,28px);
}
.rm-intro__support p{margin:0 0 1.1em}
.rm-intro__support p:last-child{margin:0}

.rm-intro--light .rm-intro__statement,
.rm-intro--light .rm-intro__support{color:var(--rm-ink)}
.rm-intro--light .rm-intro__label,
.rm-intro--light .rm-intro__support .eyebrow{color:var(--rm-sage-tx)}

@media (max-width:860px){
  .rm-intro{grid-template-columns:minmax(0,1fr);padding:clamp(3.5rem,14vw,5rem) 1.5rem clamp(1.5rem,6vw,2rem);
    row-gap:clamp(1.5rem,4vw,2rem)}
  .rm-intro__label{align-self:start;text-align:left}
  .rm-intro__statement{max-width:none}
  .rm-intro__support{grid-column:1;justify-self:start;margin-top:1rem;max-width:none}
}


/* ------------------------------------------------------------
   6. COLUMN ROW  (.rm-cols)
   ------------------------------------------------------------ */
.rm-cols-intro{
  max-width:var(--rm-max);margin:0 auto;
  padding:clamp(4rem,7vw,7rem) var(--rm-gutter) 0;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(2rem,5vw,5rem);flex-wrap:wrap;
}
.rm-cols-intro__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage-tx);margin-bottom:clamp(18px,2vw,26px);
}
.rm-cols-intro__h{
  font-size:var(--rm-h1);font-weight:500;letter-spacing:-.03em;line-height:1.02;
  color:var(--rm-ink);max-width:22ch;
}
.rm-cols-intro__h .l2{color:var(--rm-sage)}
.rm-cols-intro__link{
  display:inline-flex;align-items:center;gap:10px;flex:none;margin-bottom:6px;
  position:relative;padding-bottom:4px;
  font-size:var(--rm-link);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rm-ink);text-decoration:none;
  transition:gap .4s var(--rm-ease);
}
.rm-cols-intro__link::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--rm-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--rm-ease);
}
.rm-cols-intro__link:hover{gap:16px}
.rm-cols-intro__link:hover::after{transform:scaleX(1)}
.rm-cols-intro__link svg{transition:transform .4s var(--rm-ease)}
.rm-cols-intro__link:hover svg{transform:translateX(4px)}

.rm-cols{
  max-width:var(--rm-max);margin:0 auto;
  padding:clamp(3rem,6vw,6rem) var(--rm-gutter) clamp(4rem,7vw,7rem);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
}
.rm-cols__col{
  padding:0 clamp(1.5rem,2.2vw,2.6rem);
  border-left:1px solid rgba(20,31,39,.14);
  display:flex;flex-direction:column;
}
.rm-cols__col:first-child{border-left:none;padding-left:0}
.rm-cols__col:last-child{padding-right:0}
.rm-cols__h{
  font-size:clamp(1.35rem,1.9vw,1.7rem);font-weight:500;letter-spacing:-.015em;line-height:1.15;
  color:var(--rm-ink);margin:0 0 clamp(20px,2.4vw,34px);
}
.rm-cols__p{font-size:var(--rm-body);line-height:1.62;color:var(--rm-ink)}
.rm-cols__img{
  border-left:1px solid rgba(20,31,39,.14);
  padding:0 clamp(1.5rem,2.2vw,2.6rem);
  display:flex;align-items:stretch;
}
.rm-cols__img img{
  width:100%;height:100%;min-height:clamp(240px,20vw,320px);
  object-fit:cover;object-position:var(--rm-focus,50% 50%);
  border-radius:clamp(8px,.8vw,12px);
}

.rm-cols--navy{background:var(--rm-navy)}
.rm-cols--navy .rm-cols-intro__eyebrow{color:var(--rm-sage)}
.rm-cols--navy .rm-cols-intro__h,
.rm-cols--navy .rm-cols__h,
.rm-cols--navy .rm-cols__p{color:var(--rm-cream)}
.rm-cols--navy .rm-cols__col,
.rm-cols--navy .rm-cols__img{border-color:rgba(235,237,234,.16)}
.rm-cols--navy .rm-cols-intro__link{color:#fff}

@media (max-width:860px){
  .rm-cols-intro{gap:1.5rem;padding-top:clamp(3.5rem,14vw,5rem)}
  .rm-cols{grid-template-columns:minmax(0,1fr);gap:0}
  .rm-cols__col,.rm-cols__img{
    border-left:none;border-top:1px solid rgba(20,31,39,.14);
    padding:clamp(2rem,7vw,2.5rem) 0;
  }
  .rm-cols__col:first-child{border-top:none;padding-top:0}
  .rm-cols--navy .rm-cols__col,.rm-cols--navy .rm-cols__img{border-color:rgba(235,237,234,.16)}
  .rm-cols__img{order:99}
}


/* ------------------------------------------------------------
   7. STICKY SERVICES  (.rm-svc)
   ------------------------------------------------------------ */
.rm-svc{
  max-width:var(--rm-max);margin:0 auto;
  padding:clamp(4rem,8vw,9rem) var(--rm-gutter);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem);
}
.rm-svc__left{position:sticky;top:14vh;align-self:start;height:max-content}
.rm-svc__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage);margin-bottom:clamp(20px,2vw,30px);
}
.rm-svc__h{font-size:var(--rm-h1);font-weight:500;letter-spacing:-.03em;line-height:1}
.rm-svc__h .l{display:block}
.rm-svc__h .l1{color:var(--rm-cream)}
.rm-svc__h .l2{color:var(--rm-sage)}
.rm-svc__intro{
  font-size:var(--rm-body);line-height:1.6;color:var(--rm-paper);
  max-width:36ch;margin-top:clamp(24px,2.4vw,34px);
}
.rm-svc__right{display:flex;flex-direction:column}
.rm-svc__item{padding:clamp(3rem,5vh,4.5rem) 0;border-bottom:1px solid rgba(235,237,234,.14)}
.rm-svc__item:first-child{padding-top:0}
.rm-svc__item:last-child{border-bottom:none}
.rm-svc__num{
  display:block;font-size:.82rem;font-weight:500;letter-spacing:.2em;
  color:var(--rm-sage);margin-bottom:clamp(16px,1.6vw,20px);
}
.rm-svc__item h3{
  font-size:var(--rm-h3);font-weight:500;letter-spacing:-.02em;line-height:1.1;
  color:var(--rm-cream);margin:0 0 clamp(16px,1.8vw,22px);max-width:20ch;
}
.rm-svc__item p{
  font-size:var(--rm-body);line-height:1.62;color:var(--rm-paper);
  max-width:52ch;margin:0 0 clamp(22px,2.4vw,30px);
}
.rm-svc__more{
  display:inline-flex;align-items:center;gap:12px;position:relative;padding-bottom:4px;
  font-size:var(--rm-link);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  transition:gap .4s var(--rm-ease);
}
.rm-svc__more::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--rm-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--rm-ease);
}
.rm-svc__more:hover{gap:18px}
.rm-svc__more:hover::after{transform:scaleX(1)}
.rm-svc__more svg{transition:transform .4s var(--rm-ease)}
.rm-svc__more:hover svg{transform:translateX(4px)}

.rm-svc--navy{background:var(--rm-navy)}

/* FULL WIDTH variant.
   Drops the 1360px cap so the section runs the width of the viewport.
   The gutter stays, so nothing touches the edge, and the measure caps
   on .rm-svc__intro, .rm-svc__item h3 and .rm-svc__item p keep the
   copy readable no matter how wide the screen gets.

   Add rm-svc--full alongside rm-svc and rm-svc--navy in the element's
   CSS Classes panel. */
.rm-svc--full{
  max-width:none;
  padding-left:clamp(1.5rem,5vw,5.5rem);
  padding-right:clamp(1.5rem,5vw,5.5rem);
}
.rm-svc--light .rm-svc__h .l1,
.rm-svc--light .rm-svc__intro,
.rm-svc--light .rm-svc__item h3,
.rm-svc--light .rm-svc__more{color:var(--rm-ink)}
.rm-svc--light .rm-svc__item{border-color:rgba(20,31,39,.12)}
.rm-svc--light .rm-svc__item p{color:#3A4640}
.rm-svc--light .rm-svc__eyebrow,
.rm-svc--light .rm-svc__num{color:var(--rm-sage-tx)}

@media (max-width:860px){
  .rm-svc{grid-template-columns:minmax(0,1fr);gap:2.5rem;padding:clamp(3.5rem,14vw,5rem) 1.5rem}
  .rm-svc__left{position:static}
  .rm-svc__intro,.rm-svc__item h3,.rm-svc__item p{max-width:none}
}


/* ------------------------------------------------------------
   8. IMPACT BAND  (.rm-band)
   ------------------------------------------------------------ */
.rm-band{padding:clamp(.75rem,1.5vw,1.5rem)}
.rm-band__frame{
  position:relative;width:100%;
  min-height:clamp(420px,60vh,640px);
  border-radius:clamp(14px,1.6vw,22px);
  overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;
}
.rm-band__frame img{
  position:absolute;left:0;right:0;top:-8%;height:116%;width:100%;
  object-fit:cover;object-position:var(--rm-focus,50% 50%);z-index:0;
  transform:translateY(var(--rm-par,0px));will-change:transform;
}
.rm-band__frame::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(21,38,50,.78) 0%,rgba(21,38,50,.25) 45%,rgba(21,38,50,.08) 75%),
    linear-gradient(to right,rgba(21,38,50,.55) 0%,rgba(21,38,50,.10) 55%);
}
.rm-band__inner{
  position:relative;z-index:2;width:100%;
  padding:clamp(2.5rem,5vw,5rem) clamp(1.75rem,5vw,5.5rem);
}
.rm-band__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage-lt);margin-bottom:clamp(16px,2vw,22px);
}
.rm-band__statement{
  font-size:clamp(2rem,4.4vw,4rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.04;color:var(--rm-cream);max-width:20ch;
}
.rm-band__statement .l2{color:var(--rm-sage-lt)}
.rm-band__cta{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(1.5rem,2.5vw,2.2rem);
  padding:.9em 2em;border-radius:999px;
  font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rm-cream);text-decoration:none;
  border:1px solid rgba(235,237,234,.5);background:transparent;
  transition:background .4s var(--rm-ease),color .4s var(--rm-ease),
             border-color .4s var(--rm-ease),gap .4s var(--rm-ease);
}
.rm-band__cta svg{transition:transform .4s var(--rm-ease)}
.rm-band__cta:hover{background:var(--rm-accent);border-color:var(--rm-accent);color:#fff;gap:16px}
.rm-band__cta:hover svg{transform:translateX(3px)}

@media (max-width:860px){
  .rm-band__frame{min-height:clamp(360px,56vh,460px)}
  .rm-band__statement{max-width:none;font-size:clamp(1.8rem,7vw,2.6rem)}
}


/* ------------------------------------------------------------
   9. TESTIMONIAL  (.rm-quote)
   ------------------------------------------------------------ */
.rm-quote{padding:clamp(4rem,9vw,9rem) var(--rm-gutter);background:var(--rm-cream)}
.rm-quote__inner{
  max-width:var(--rm-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.rm-quote__body{align-self:center}
.rm-quote__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--rm-focus,50% 50%);
  border-radius:clamp(12px,1.4vw,18px);background:var(--rm-paper);
}
.rm-quote__label{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage-tx);margin-bottom:clamp(2rem,4vw,3rem);
}
.rm-quote__text{
  font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.24;color:var(--rm-ink);
  margin:0 0 clamp(2rem,4vw,3rem);max-width:20ch;
}
.rm-quote__attr{font-size:1rem;line-height:1.5;color:var(--rm-sage-tx);font-style:normal}
.rm-quote__attr .name{color:var(--rm-ink);font-weight:500}
.rm-quote__attr .role{display:block;color:#5C625E}

.rm-quote--navy{background:var(--rm-navy)}
.rm-quote--navy .rm-quote__label{color:var(--rm-sage)}
.rm-quote--navy .rm-quote__text{color:var(--rm-cream)}
.rm-quote--navy .rm-quote__attr{color:var(--rm-sage)}
.rm-quote--navy .rm-quote__attr .name{color:var(--rm-cream)}
.rm-quote--navy .rm-quote__attr .role{color:var(--rm-faded-lt)}

@media (max-width:860px){
  .rm-quote__inner{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .rm-quote__text{max-width:none}
  .rm-quote__body{align-self:center}
.rm-quote__media img{aspect-ratio:3/2}
}


/* ------------------------------------------------------------
   10. JOURNAL TEASER  (.rm-journal)
   ------------------------------------------------------------ */
.rm-journal{background:var(--rm-navy);padding:clamp(4rem,8vw,8rem) var(--rm-gutter)}
.rm-journal__inner{max-width:var(--rm-max);margin:0 auto}
.rm-journal__head{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,4vw,4rem);
  align-items:end;margin-bottom:clamp(3rem,5vw,4.5rem);
}
.rm-journal__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage);margin-bottom:clamp(18px,2.2vw,26px);
}
.rm-journal__h{
  font-size:clamp(2rem,3.6vw,3.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.04;
  color:var(--rm-cream);max-width:18ch;
}
.rm-journal__head-right{display:flex;flex-direction:column;gap:clamp(1.25rem,2vw,1.75rem)}
.rm-journal__intro{font-size:var(--rm-body);line-height:1.6;color:var(--rm-paper);max-width:40ch}
.rm-journal__all{
  display:inline-flex;align-items:center;gap:12px;align-self:start;padding-bottom:6px;
  font-size:var(--rm-link);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);
  transition:gap .4s var(--rm-ease),border-color .4s var(--rm-ease);
}
.rm-journal__all svg{transition:transform .4s var(--rm-ease)}
.rm-journal__all:hover{gap:18px;border-bottom-color:var(--rm-accent)}
.rm-journal__all:hover svg{transform:translateX(4px)}

.rm-journal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2vw,1.75rem)}
.rm-journal__card{
  display:flex;flex-direction:column;position:relative;isolation:isolate;
  padding:clamp(1.75rem,2.5vw,2.5rem);
  background:rgba(235,237,234,.03);
  border:1px solid rgba(235,237,234,.12);
  border-radius:clamp(10px,1vw,14px);
  text-decoration:none;
  transition:transform .5s var(--rm-ease),background .5s var(--rm-ease),border-color .5s var(--rm-ease);
}
.rm-journal__card::before{
  content:'';position:absolute;top:-1px;
  left:clamp(1.75rem,2.5vw,2.5rem);right:clamp(1.75rem,2.5vw,2.5rem);
  height:2px;background:var(--rm-sage);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--rm-ease);
}
.rm-journal__card:hover{
  transform:translateY(-6px);background:rgba(235,237,234,.06);border-color:rgba(235,237,234,.2);
}
.rm-journal__card:hover::before{transform:scaleX(1)}
.rm-journal__cat{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rm-sage);margin-bottom:clamp(1.25rem,2vw,1.75rem);
}
.rm-journal__title{
  font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.015em;line-height:1.2;
  color:var(--rm-cream);margin:0 0 clamp(1rem,1.6vw,1.4rem);
}
.rm-journal__excerpt{font-size:var(--rm-body);line-height:1.6;color:var(--rm-paper);margin:0 0 auto}
.rm-journal__more{
  display:inline-flex;align-items:center;gap:9px;position:relative;
  margin-top:clamp(1.75rem,2.5vw,2.25rem);padding-bottom:3px;width:max-content;
  font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.rm-journal__more::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--rm-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--rm-ease);
}
.rm-journal__card:hover .rm-journal__more::after{transform:scaleX(1)}
.rm-journal__more svg{transition:transform .4s var(--rm-ease)}
.rm-journal__card:hover .rm-journal__more svg{transform:translateX(3px)}

/* LIGHT variant. Used by the related-posts block at the foot of a
   Field Note, so it does not sit navy against the navy closing band
   directly below it. */
.rm-journal--light{background:var(--rm-cream)}
.rm-journal--light .rm-journal__eyebrow{color:var(--rm-sage-tx)}
.rm-journal--light .rm-journal__h,
.rm-journal--light .rm-journal__title{color:var(--rm-ink)}
.rm-journal--light .rm-journal__intro,
.rm-journal--light .rm-journal__excerpt{color:var(--rm-ink)}
.rm-journal--light .rm-journal__cat{color:var(--rm-sage-tx)}
.rm-journal--light .rm-journal__all,
.rm-journal--light .rm-journal__more{color:var(--rm-ink)}
.rm-journal--light .rm-journal__all{border-bottom-color:rgba(20,31,39,.3)}
.rm-journal--light .rm-journal__card{
  background:transparent;border-color:rgba(20,31,39,.14);
}
.rm-journal--light .rm-journal__card:hover{
  background:rgba(20,31,39,.02);border-color:rgba(20,31,39,.24);
}

/* the excerpt is a div now, because post_content_short arrives as raw
   HTML from the editor and may carry its own paragraphs */
.rm-journal__excerpt p{margin:0 0 .8em}
.rm-journal__excerpt p:last-child{margin:0}

@media (max-width:960px){
  .rm-journal__grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .rm-journal__head{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .rm-journal__h{max-width:none}
}


/* ------------------------------------------------------------
   11. CLOSING BAND  (.rm-close)
   ONE module replacing the four near-identical closing sections
   that existed across the Squarespace pages:
     #relationship-cta   home and services
     #work-with-us       services
     #field-notes-cta    field notes, contact and about
   Same shape every time: optional eyebrow, statement, link, image.
   Variants: --navy (default), --light, --band (statement over image).
   ------------------------------------------------------------ */
.rm-close{background:var(--rm-navy);padding:clamp(3.5rem,6vw,5.5rem) var(--rm-gutter)}
.rm-close__inner{
  max-width:var(--rm-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.4fr);gap:clamp(2rem,4vw,4rem);align-items:center;
}
.rm-close__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage);margin-bottom:clamp(18px,2vw,26px);
}
.rm-close__statement{
  font-size:clamp(1.9rem,3.4vw,3rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.08;color:var(--rm-cream);max-width:26ch;
}
.rm-close__statement .l2{color:var(--rm-sage)}
.rm-close__p{
  font-size:var(--rm-body);line-height:1.6;color:var(--rm-paper);
  max-width:46ch;margin-top:clamp(1.25rem,2vw,1.75rem);
}
.rm-close__link{
  justify-self:end;align-self:center;
  display:inline-flex;align-items:center;gap:12px;white-space:nowrap;padding-bottom:8px;
  font-size:var(--rm-link);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);
  transition:gap .4s var(--rm-ease),border-color .4s var(--rm-ease);
}
.rm-close__link svg{transition:transform .4s var(--rm-ease)}
.rm-close__link:hover{gap:18px;border-bottom-color:var(--rm-accent)}
.rm-close__link:hover svg{transform:translateX(4px)}

.rm-close--light{background:var(--rm-cream)}
.rm-close--light .rm-close__eyebrow{color:var(--rm-sage-tx)}
.rm-close--light .rm-close__statement{color:var(--rm-ink)}
.rm-close--light .rm-close__p{color:var(--rm-ink)}
.rm-close--light .rm-close__link{color:var(--rm-ink);border-bottom-color:rgba(20,31,39,.3)}
.rm-close--light .rm-close__link:hover{border-bottom-color:var(--rm-accent)}

@media (max-width:860px){
  .rm-close__inner{grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}
  .rm-close__statement,.rm-close__p{max-width:none}
  .rm-close__link{justify-self:start}
}


/* ------------------------------------------------------------
   12. FOOTER  (.rm-footer)
   ------------------------------------------------------------ */
.rm-footer{
  background:var(--rm-navy);color:var(--rm-cream);
  padding:clamp(3.5rem,7vw,6.5rem) var(--rm-gutter) clamp(1.5rem,3vw,2.5rem);
}
.rm-footer__inner{max-width:var(--rm-max);margin:0 auto}
.rm-footer__top{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(3rem,5vw,5rem);
}
.rm-footer__brand{display:flex;flex-direction:column;gap:1rem}
.rm-footer__logo{
  width:clamp(190px,17vw,250px);
  height:auto;min-height:1px;
}
.rm-footer__col-label{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rm-sage);margin-bottom:clamp(16px,2vw,22px);
}
.rm-footer__links{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px)}
.rm-footer__links a{
  position:relative;padding-bottom:2px;
  font-size:1rem;font-weight:400;color:var(--rm-cream);text-decoration:none;
  transition:color .3s var(--rm-ease);
}
.rm-footer__links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--rm-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--rm-ease);
}
.rm-footer__links a:hover::after{transform:scaleX(1)}
.rm-footer__contact{font-size:1rem;line-height:1.7;color:var(--rm-cream)}
.rm-footer__contact a{
  color:var(--rm-cream);text-decoration:none;
  border-bottom:1px solid rgba(235,237,234,.25);
  transition:border-color .3s var(--rm-ease);
}
.rm-footer__contact a:hover{border-bottom-color:var(--rm-accent)}
.rm-footer__contact .l{display:block}
.rm-footer__divider{height:1px;background:rgba(235,237,234,.14);margin:0 0 clamp(1.25rem,2.5vw,2rem)}
.rm-footer__legal{
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;
  font-size:.86rem;color:var(--rm-faded-lt);line-height:1.65;
}
.rm-footer__legal a{
  color:var(--rm-faded-lt);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s var(--rm-ease);
}
.rm-footer__legal a:hover{border-bottom-color:var(--rm-faded-lt)}
.rm-footer__licence{max-width:64ch}
.rm-footer__legal-links{
  display:flex;flex-wrap:wrap;gap:.5em 1.5em;
  flex:1 1 100%;
  padding-bottom:clamp(.75rem,1.5vw,1.25rem);
}
.rm-footer__legal-links a{
  color:var(--rm-cream);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--rm-ease);
}
.rm-footer__legal-links a:hover{border-bottom-color:var(--rm-accent)}
.rm-footer--light .rm-footer__legal-links a{color:var(--rm-ink)}

@media (max-width:860px){
  .rm-footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem 1.5rem;padding-bottom:2.5rem}
  .rm-footer__brand{grid-column:1 / -1;margin-bottom:1rem}
  .rm-footer__logo{width:min(72%,300px)}
  .rm-footer__legal{flex-direction:column;gap:.75rem}
}
@media (max-width:480px){
  .rm-footer__top{grid-template-columns:minmax(0,1fr)}
}


/* ------------------------------------------------------------
   13. PAGE HEADER  (.rm-phead)
   Listed in the old contents but never actually written. Built here
   for internal pages that open on type rather than an image.
   ------------------------------------------------------------ */
.rm-phead{
  max-width:var(--rm-max);margin:0 auto;
  padding:clamp(4rem,8vw,7rem) var(--rm-gutter) clamp(2.5rem,5vw,4rem);
}
.rm-phead__crumb{
  display:flex;align-items:center;gap:.6em;flex-wrap:wrap;
  font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rm-sage-tx);margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.rm-phead__crumb a{text-decoration:none;color:var(--rm-sage-tx);transition:color .3s var(--rm-ease)}
.rm-phead__crumb a:hover{color:var(--rm-accent)}
.rm-phead__crumb span[aria-current]{color:var(--rm-ink)}
.rm-phead__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage-tx);margin-bottom:clamp(20px,2.5vw,30px);
}
.rm-phead__h{
  font-size:clamp(2.4rem,5vw,4rem);font-weight:500;letter-spacing:-.03em;line-height:1.02;
  color:var(--rm-ink);max-width:20ch;
}
.rm-phead__h .l2{color:var(--rm-sage)}
.rm-phead__intro{
  font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;color:var(--rm-ink);
  max-width:52ch;margin-top:clamp(1.5rem,3vw,2.25rem);
}
/* On a Field Note the breadcrumb is its own block, immediately above
   the post header, so it needs no bottom padding of its own. */
.rm-phead--post{
  padding-top:clamp(3rem,6vw,5rem);
  padding-bottom:clamp(2.5rem,4.5vw,3.75rem);
}
.rm-phead--post .rm-phead__crumb{margin-bottom:0}

@media (max-width:860px){
  .rm-phead__h,.rm-phead__intro{max-width:none}
}


/* ------------------------------------------------------------
   14. SERVICES PAGE  (.rm-svchero, .rm-svcstep)
   ------------------------------------------------------------ */
.rm-svchero{padding:clamp(.75rem,1.5vw,1.5rem)}
.rm-svchero__frame{
  position:relative;width:100%;
  min-height:clamp(380px,52vh,560px);
  border-radius:clamp(14px,1.6vw,22px);
  overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.rm-svchero__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--rm-focus,50% 50%);z-index:0;
}
.rm-svchero__frame::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(21,38,50,.5) 0%,rgba(21,38,50,.15) 40%,rgba(21,38,50,.55) 100%);
}
.rm-svchero--dark .rm-svchero__frame::after{
  background:
    linear-gradient(180deg,rgba(21,38,50,.62) 0%,rgba(21,38,50,.34) 42%,rgba(21,38,50,.72) 100%),
    linear-gradient(100deg,rgba(21,38,50,.55) 0%,rgba(21,38,50,.22) 55%,rgba(21,38,50,.10) 100%);
}
.rm-svchero__inner{
  position:relative;z-index:2;width:100%;
  padding:clamp(2rem,5vw,4.5rem) clamp(1.5rem,5vw,5.5rem);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;
}
.rm-svchero__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage-lt);margin-bottom:clamp(16px,2vw,22px);
}
.rm-svchero__h{
  font-size:clamp(2.4rem,5vw,4.2rem);font-weight:500;letter-spacing:-.03em;line-height:1;
  color:var(--rm-cream);max-width:16ch;
}
.rm-svchero__h .l2{color:var(--rm-sage-lt)}
.rm-svchero__intro{
  align-self:end;justify-self:end;max-width:34ch;
  font-size:clamp(1rem,1.1vw,1.12rem);line-height:1.55;color:var(--rm-cream);
}

.rm-svcstep{
  padding:clamp(3.5rem,6vw,6rem) var(--rm-gutter);
  border-top:1px solid rgba(20,31,39,.1);
  scroll-margin-top:clamp(5rem,9vw,8rem);
}
.rm-svcstep:first-of-type{border-top:none;padding-top:clamp(3rem,5vw,4.5rem)}
.rm-svcstep__inner{
  max-width:var(--rm-max);margin:0 auto;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.rm-svcstep__num{
  display:block;font-size:.9rem;font-weight:500;letter-spacing:.18em;
  color:var(--rm-sage-tx);margin-bottom:clamp(20px,2.5vw,32px);
}
.rm-svcstep__h{
  font-size:clamp(2.2rem,4vw,3.4rem);font-weight:500;letter-spacing:-.03em;line-height:1.02;
  color:var(--rm-ink);margin:0 0 clamp(20px,2.5vw,30px);max-width:14ch;
}
.rm-svcstep__sub{
  font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:400;line-height:1.35;
  color:var(--rm-sage-tx);max-width:24ch;
}
.rm-svcstep__body p{
  font-size:var(--rm-body);line-height:1.62;color:var(--rm-ink);margin:0 0 1.1em;max-width:52ch;
}
.rm-svcstep__covers-label{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rm-sage-tx);margin:clamp(2rem,3vw,2.5rem) 0 clamp(16px,2vw,20px);
}
.rm-svcstep__covers{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px)}
.rm-svcstep__covers li{
  font-size:var(--rm-body);line-height:1.5;color:var(--rm-ink);padding-left:1.4em;position:relative;
}
.rm-svcstep__covers li::before{
  content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--rm-sage);
}

@media (max-width:860px){
  .rm-svchero__frame{min-height:60vh}
  .rm-svchero__inner{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .rm-svchero__intro{justify-self:start;max-width:none}
  .rm-svcstep{padding:clamp(3.5rem,12vw,5rem) 1.5rem}
  .rm-svcstep__inner{grid-template-columns:minmax(0,1fr);gap:2rem}
  .rm-svcstep__h,.rm-svcstep__sub{max-width:none}
}


/* ------------------------------------------------------------
   15. HOW WE WORK  (.rm-work)
   ------------------------------------------------------------ */
.rm-work{background:var(--rm-navy);padding:clamp(4rem,8vw,8rem) var(--rm-gutter)}
.rm-work__inner{max-width:var(--rm-max);margin:0 auto}
.rm-work__head{margin-bottom:clamp(3rem,6vw,5.5rem)}
.rm-work__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage);margin-bottom:clamp(18px,2.2vw,26px);
}
.rm-work__h{
  font-size:clamp(2rem,3.6vw,3.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.04;
  color:var(--rm-cream);
}
.rm-work__timeline{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4rem);
  position:relative;padding-top:clamp(2rem,3vw,2.5rem);
}
.rm-work__timeline::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:rgba(235,237,234,.18);
}
.rm-work__point{
  position:relative;padding-top:clamp(1.5rem,2.4vw,2rem);
  opacity:.62;transition:opacity .45s var(--rm-ease);
}
.rm-work__point::before{
  content:'';position:absolute;top:calc(-1 * clamp(2rem,3vw,2.5rem) - .5px);left:0;
  width:clamp(28px,3vw,40px);height:2px;background:var(--rm-sage);
  transform:scaleX(.35);transform-origin:left;
  transition:transform .45s var(--rm-ease);
}
.rm-work__point:hover,.rm-work__point:focus-within{opacity:1}
.rm-work__point:hover::before,.rm-work__point:focus-within::before{transform:scaleX(1)}
.rm-work__label{
  display:block;font-size:.82rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rm-sage);margin-bottom:clamp(14px,1.6vw,18px);
}
.rm-work__point-h{
  font-size:clamp(1.35rem,1.9vw,1.7rem);font-weight:500;letter-spacing:-.015em;line-height:1.15;
  color:var(--rm-cream);margin:0 0 clamp(14px,1.6vw,18px);
}
.rm-work__point-p{font-size:var(--rm-body);line-height:1.6;color:var(--rm-paper)}

@media (max-width:860px){
  .rm-work__timeline{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0;padding-left:clamp(1.5rem,5vw,2rem)}
  .rm-work__timeline::before{top:0;bottom:0;left:0;right:auto;width:1px;height:auto}
  .rm-work__point{opacity:1;padding:clamp(1.5rem,5vw,2rem) 0}
  .rm-work__point:first-child{padding-top:0}
  .rm-work__point::before{
    top:calc(clamp(1.5rem,5vw,2rem) + .5em);left:calc(-1 * clamp(1.5rem,5vw,2rem));
    width:2px;height:clamp(20px,4vw,28px);transform:scaleY(1);
  }
  .rm-work__point:first-child::before{top:.5em}
}
@media (prefers-reduced-motion:reduce){
  .rm-work__point{opacity:1}
}


/* ------------------------------------------------------------
   16. PEOPLE  (.rm-people)
   One landscape group photo, then the three principals in columns
   beneath it. The individual portraits were removed at the client's
   request.

   .rm-person__photo is kept below but is no longer used on the About
   page. Left in because it is the only portrait treatment on the site
   and will be wanted again if single headshots ever return.
   ------------------------------------------------------------ */
.rm-people{
  max-width:var(--rm-max);margin:0 auto;
  padding:clamp(3rem,6vw,6rem) var(--rm-gutter) clamp(4rem,8vw,8rem);
}
.rm-people__label{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage-tx);margin-bottom:clamp(2.5rem,5vw,4rem);
}
/* GROUP PHOTO.
   16:9 rather than anything wider, because a letterbox crop on three
   standing people takes the tops of their heads off. Drops to 4:3 on
   mobile where the frame is narrow and faces need the height. */
.rm-people__group{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:var(--rm-focus,50% 40%);
  border-radius:clamp(10px,1.2vw,16px);
  background:var(--rm-paper);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}

.rm-people__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.rm-person{display:flex;flex-direction:column}
.rm-person__photo{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--rm-focus,50% 50%);
  border-radius:clamp(10px,1.2vw,16px);
  margin-bottom:clamp(1.5rem,2.5vw,2rem);background:var(--rm-paper);
}
.rm-person--nophoto{border-top:2px solid var(--rm-sage);padding-top:clamp(1.5rem,2.5vw,2rem)}
.rm-person__name{
  font-size:clamp(1.4rem,2vw,1.8rem);font-weight:500;letter-spacing:-.02em;line-height:1.1;
  color:var(--rm-ink);margin:0 0 clamp(14px,1.6vw,18px);
}
.rm-person__bio{font-size:var(--rm-body);line-height:1.62;color:var(--rm-ink);margin:0 0 1em}
.rm-person__bio:last-of-type{margin-bottom:clamp(16px,2vw,22px)}
.rm-person__link{
  display:inline-flex;align-items:center;gap:9px;position:relative;padding-bottom:3px;
  font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rm-ink);text-decoration:none;
  transition:gap .4s var(--rm-ease);
}
.rm-person__link::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--rm-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--rm-ease);
}
.rm-person__link:hover{gap:14px}
.rm-person__link:hover::after{transform:scaleX(1)}

@media (max-width:860px){
  .rm-people__group{
    aspect-ratio:4 / 3;
    margin-bottom:clamp(2rem,6vw,2.5rem);
  }
  .rm-people__grid{grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,6vw,3.5rem);max-width:32rem}
  .rm-person__photo{aspect-ratio:3/2}
}


/* ------------------------------------------------------------
   17. PRINCIPLES  (.rm-values)
   ------------------------------------------------------------ */
.rm-values{background:var(--rm-navy);padding:clamp(4rem,8vw,8rem) var(--rm-gutter)}
.rm-values__inner{
  max-width:var(--rm-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.rm-values__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage);margin-bottom:clamp(18px,2vw,26px);
}
.rm-values__statement{
  font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.12;color:var(--rm-cream);max-width:16ch;
}
.rm-values__statement .l2{color:var(--rm-sage)}
.rm-values__head{position:sticky;top:16vh;align-self:start}
.rm-values__list{display:flex;flex-direction:column}
.rm-values__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);
  padding:clamp(2rem,3.5vw,3rem) 0;
  border-top:1px solid rgba(235,237,234,.16);
}
.rm-values__item:first-child{padding-top:0;border-top:none}
.rm-values__item:last-child{padding-bottom:0}
.rm-values__num{font-size:.9rem;font-weight:500;letter-spacing:.16em;color:var(--rm-sage);padding-top:.4em}
.rm-values__h{
  font-size:clamp(1.25rem,1.8vw,1.55rem);font-weight:500;letter-spacing:-.015em;line-height:1.15;
  color:var(--rm-cream);margin:0 0 clamp(12px,1.4vw,16px);
}
.rm-values__p{font-size:var(--rm-body);line-height:1.62;color:var(--rm-paper);max-width:44ch}

.rm-values--light{background:var(--rm-cream)}
.rm-values--light .rm-values__eyebrow{color:var(--rm-sage-tx)}
.rm-values--light .rm-values__statement,
.rm-values--light .rm-values__h,
.rm-values--light .rm-values__p{color:var(--rm-ink)}
.rm-values--light .rm-values__num{color:var(--rm-sage-tx)}
.rm-values--light .rm-values__item{border-color:rgba(20,31,39,.14)}

@media (max-width:860px){
  .rm-values__inner{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .rm-values__head{position:static}
  .rm-values__statement{max-width:none}
  .rm-values__item{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .rm-values__num{padding-top:0}
}


/* ------------------------------------------------------------
   18. FIELD NOTES LIST  (.rm-fn)
   Replaces the old module 20 entirely. That one targeted
   Squarespace's blog-side-by-side collection DOM, which does not
   exist here. This markup is ours.
   ------------------------------------------------------------ */
.rm-fn{max-width:var(--rm-max);margin:0 auto;padding:clamp(2rem,4vw,3.5rem) var(--rm-gutter) clamp(4rem,8vw,7rem)}
/* Oncord wraps EACH repetition of a dynamic template in its own
   container div. That makes every article the first child of its own
   parent, so a :first-child rule would strip the divider off every
   item rather than just the first. Same shape as the Squarespace
   blog-side-by-side-wrapper problem.

   So the divider is border-bottom on every item and there is no
   :first-child or :last-child rule anywhere in this module. It renders
   identically apart from one hairline at the foot of the list, which
   sits above the navy closing band. */
.rm-fn__item{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,26%,340px);
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding:0 0 clamp(2rem,3.5vw,3rem);
  margin-bottom:clamp(2rem,3.5vw,3rem);
  border-bottom:1px solid rgba(20,31,39,.12);
}

/* The repeater's own container. The class is
   templateContainer--websitePosts-{template}-{variant}, and the
   variant suffix depends on which one is selected, so this matches on
   the stable part of the name rather than guessing the whole thing. */
[class*="templateContainer--websitePosts"]{
  display:block;
  width:100%;
}
.rm-fn__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1em;
  margin-bottom:clamp(12px,1.4vw,18px);
}
.rm-fn__cat{
  font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rm-sage-tx);text-decoration:none;
  transition:color .3s var(--rm-ease);
}
a.rm-fn__cat:hover{color:var(--rm-accent)}
.rm-fn__date,.rm-fn__author{font-size:.86rem;font-weight:400;color:var(--rm-faded)}
.rm-fn__title{
  font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:500;letter-spacing:-.02em;line-height:1.15;
  margin:0 0 clamp(12px,1.4vw,16px);
}
.rm-fn__title a{
  color:var(--rm-ink);text-decoration:none;transition:color .3s var(--rm-ease);
}
.rm-fn__title a:hover{color:var(--rm-sage-tx)}
.rm-fn__excerpt{font-size:var(--rm-body);line-height:1.62;color:var(--rm-ink);max-width:56ch}
/* the excerpt is a div, because post_content_short arrives as raw HTML
   from the editor and may already carry its own paragraphs */
.rm-fn__excerpt p{margin:0 0 .8em}
.rm-fn__excerpt p:last-child{margin:0}
.rm-fn__more{
  display:inline-block;margin-top:clamp(14px,1.8vw,20px);padding-bottom:3px;
  font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rm-ink);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--rm-ease);
}
.rm-fn__more:hover{border-bottom-color:var(--rm-accent)}
.rm-fn__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--rm-focus,50% 50%);
  border-radius:clamp(10px,1.2vw,16px);background:var(--rm-paper);
}
.rm-fn__offline{
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rm-accent);border:1px solid var(--rm-accent);
  border-radius:999px;padding:.25em .8em;
}
.rm-fn__empty{
  padding:clamp(2.5rem,5vw,4rem) 0;
  font-size:var(--rm-body);color:var(--rm-faded);
}

@media (max-width:760px){
  .rm-fn__item{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .rm-fn__media{order:-1}
  .rm-fn__excerpt{max-width:none}
}


/* ------------------------------------------------------------
   19. FIELD NOTES SEARCH AND FILTERS  (.rm-fnfilter)

   Wraps Oncord form controls, not our own markup. Oncord renders a
   grey panel around a two column label/field table, so the panel has
   to be stripped and the table collapsed before anything can be
   styled. The !important is genuinely required, because Oncord's own
   rules load after custom stylesheets.

   TWO TRAPS ALREADY HIT HERE.

   1. The reset must apply to the wrapper's DESCENDANTS only. An
      earlier version listed .rm-fnfilter itself in the selector and
      zeroed padding and margin on it, which killed the page gutter
      and the auto centring, and the field ran to the edge of the
      screen.

   2. Oncord does not render the row label as a th or a label
      element, so styling those directly reached nothing. Instead the
      label treatment is set on the wrapper and inherited, then
      overridden on the controls. The only loose text inside this
      block is labels, so that is safe.
   ------------------------------------------------------------ */
.rm-fnfilter{
  max-width:var(--rm-max);
  margin:0 auto;
  padding:clamp(1.5rem,3vw,2.25rem) var(--rm-gutter);

  /* label treatment, inherited by whatever element holds the text */
  font-family:var(--rm-font);
  font-size:var(--rm-eyebrow);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rm-sage-tx);
  line-height:1.4;
}

/* strip Oncord's chrome off every wrapper INSIDE, never the wrapper
   itself and never the controls */
.rm-fnfilter div, .rm-fnfilter form, .rm-fnfilter fieldset,
.rm-fnfilter section, .rm-fnfilter span, .rm-fnfilter table,
.rm-fnfilter tbody, .rm-fnfilter thead, .rm-fnfilter tr,
.rm-fnfilter td, .rm-fnfilter th, .rm-fnfilter label{
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}

/* collapse the label and field table into a stack */
.rm-fnfilter table, .rm-fnfilter tbody, .rm-fnfilter thead,
.rm-fnfilter tr, .rm-fnfilter td, .rm-fnfilter th{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}

/* the two fields side by side */
.rm-fnfilter form{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(200px,300px);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:end;
  margin:0 !important;
  padding:0 !important;
}
.rm-fnfilter form > *{min-width:0}

/* breathing room under whatever holds the label text */
.rm-fnfilter th, .rm-fnfilter label{
  display:block !important;
  margin:0 0 8px !important;
}

/* the controls, back to normal type and an underline field */
.rm-fnfilter input:not([type="submit"]):not([type="button"]),
.rm-fnfilter select,
.rm-fnfilter textarea{
  width:100% !important;
  box-sizing:border-box !important;
  font-family:var(--rm-font) !important;
  font-size:var(--rm-body) !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  color:var(--rm-ink) !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(20,31,39,.28) !important;
  border-radius:0 !important;
  padding:11px 0 12px !important;
  margin:6px 0 0 !important;
  box-shadow:none !important;
  appearance:none;-webkit-appearance:none;
  transition:border-color .3s var(--rm-ease) !important;
}
.rm-fnfilter input:focus,
.rm-fnfilter select:focus{
  border-bottom-color:var(--rm-sage) !important;
  outline:none !important;
}
.rm-fnfilter input::placeholder{
  color:var(--rm-faded) !important;opacity:1 !important;
  font-size:.86em !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

/* Oncord drops its own magnifier inside the search control. It lands
   on top of the placeholder once the field is unboxed, so it goes. */
.rm-fnfilter img,
.rm-fnfilter svg,
.rm-fnfilter button,
.rm-fnfilter input[type="submit"],
.rm-fnfilter input[type="image"]{
  display:none !important;
}

/* chevron for the select, since the native one is removed above */
.rm-fnfilter select{
  background-image:linear-gradient(45deg,transparent 50%,var(--rm-faded) 50%),
                   linear-gradient(135deg,var(--rm-faded) 50%,transparent 50%) !important;
  background-position:calc(100% - 11px) calc(50% + 1px),
                      calc(100% - 6px) calc(50% + 1px) !important;
  background-size:5px 5px,5px 5px !important;
  background-repeat:no-repeat !important;
  padding-right:26px !important;
  cursor:pointer !important;
}

@media (max-width:860px){
  .rm-fnfilter form{grid-template-columns:minmax(0,1fr);gap:1.5rem}
}


/* ------------------------------------------------------------
   19b. LEGAL DOCUMENT  (.rm-legal)

   Shared by Terms, Privacy, Disclaimer and Complaints. Long form
   reading, so it uses the same 44rem measure as a Field Note, with a
   jump list at the top because these are documents people scan for
   one clause rather than read end to end.

   Pairs with .rm-phead for the page header.
   ------------------------------------------------------------ */
/* The wrapper runs to the page gutter so it lines up with .rm-phead
   above it, and the measure is capped on the children instead. An
   earlier version centred the whole block, which left the body
   drifting right of its own heading. */
.rm-legal{
  max-width:var(--rm-max);
  margin:0 auto;
  padding:0 var(--rm-gutter) clamp(4rem,8vw,7rem);
}
.rm-legal > *{max-width:44rem}
.rm-legal__updated{
  font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rm-sage-tx);
  padding-bottom:clamp(1.25rem,2vw,1.75rem);
  border-bottom:1px solid rgba(20,31,39,.14);
  margin-bottom:clamp(2rem,3.5vw,3rem);
}

/* jump list */
.rm-legal__toc{
  margin:0 0 clamp(2.5rem,4vw,3.5rem);
  padding:clamp(1.5rem,2.5vw,2rem);
  border:1px solid rgba(20,31,39,.14);
  border-radius:clamp(10px,1vw,14px);
}
.rm-legal__toc-label{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rm-sage-tx);
  margin-bottom:clamp(.9rem,1.4vw,1.1rem);
}
.rm-legal__toc ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.6em;
  counter-reset:rm-toc;
}
.rm-legal__toc li{counter-increment:rm-toc;display:flex;gap:.9em}
.rm-legal__toc li::before{
  content:counter(rm-toc,decimal-leading-zero);
  font-size:.86rem;font-weight:500;letter-spacing:.1em;
  color:var(--rm-sage);flex:none;padding-top:.15em;
}
.rm-legal__toc a{
  font-size:1rem;line-height:1.5;color:var(--rm-ink);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--rm-ease);
}
.rm-legal__toc a:hover{border-bottom-color:var(--rm-accent)}

/* body */
.rm-legal h2{
  font-size:clamp(1.35rem,2vw,1.7rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.2;color:var(--rm-ink);
  margin:clamp(2.5rem,4vw,3.25rem) 0 clamp(.8rem,1.2vw,1rem);
  scroll-margin-top:clamp(5rem,9vw,8rem);
}
.rm-legal h3{
  font-size:clamp(1.08rem,1.4vw,1.22rem);font-weight:500;
  letter-spacing:-.01em;line-height:1.3;color:var(--rm-ink);
  margin:clamp(1.6rem,2.6vw,2rem) 0 clamp(.5rem,.9vw,.7rem);
}
.rm-legal p{
  font-size:1.05rem;line-height:1.7;color:var(--rm-ink);margin:0 0 1.25em;
}
.rm-legal ul,.rm-legal ol.rm-legal__list{
  margin:0 0 1.5em;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:.75em;
}
.rm-legal li{
  font-size:1.05rem;line-height:1.65;color:var(--rm-ink);
  padding-left:1.4em;position:relative;
}
.rm-legal ul li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:6px;height:1px;background:var(--rm-sage);
}
.rm-legal a{
  color:var(--rm-ink);text-decoration:none;
  border-bottom:1px solid rgba(20,31,39,.3);
  transition:border-color .3s var(--rm-ease);
}
.rm-legal a:hover{border-bottom-color:var(--rm-accent)}
.rm-legal strong{font-weight:500}

/* a contact block, used by Complaints and Privacy */
.rm-legal__contact{
  margin:clamp(2rem,3vw,2.5rem) 0;
  padding:clamp(1.5rem,2.5vw,2rem);
  background:var(--rm-paper);
  border-radius:clamp(10px,1vw,14px);
}
.rm-legal__contact p{margin:0 0 .5em;font-size:1rem}
.rm-legal__contact p:last-child{margin:0}

/* anything still awaiting real copy */
.rm-legal__todo{
  display:block;
  padding:1rem 1.25rem;margin:0 0 1.25em;
  border-left:3px solid var(--rm-accent);
  background:rgba(220,125,72,.06);
  font-size:1rem;line-height:1.6;color:var(--rm-ink);
}

@media (max-width:860px){
  .rm-legal > *{max-width:none}
}


/* ------------------------------------------------------------
   20. FIELD NOTE ARTICLE  (.rm-post)
   Replaces the old module 22. Same measure, same centred title, but
   written against our own markup instead of body.view-item.
   ------------------------------------------------------------ */
.rm-post{padding:0 var(--rm-gutter) clamp(3rem,6vw,5rem)}
/* the header and the featured image are rendered by the design, above
   regions:content, so they sit outside .rm-post and carry their own
   gutter */
.rm-post__head{padding:0 var(--rm-gutter)}

/* FEATURED IMAGE.
   Wider than the 44rem text measure so it reads as a moment rather
   than an inline figure, in the same rounded frame as the hero and
   the impact band. Only renders when the Post record has an image. */
.rm-post__media{
  width:min(100%, 68rem);
  margin:clamp(2.5rem,4.5vw,3.75rem) auto 0;
  padding:0 var(--rm-gutter);
}
.rm-post__media > *{max-width:100%}
.rm-post__media img{
  width:100%;max-width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:var(--rm-focus,50% 50%);
  border-radius:clamp(12px,1.4vw,18px);
  background:var(--rm-paper);
}
.rm-post__head{max-width:44rem;margin:0 auto;text-align:center}
.rm-post__h{
  font-size:clamp(2rem,3.6vw,3rem);font-weight:500;letter-spacing:-.03em;line-height:1.05;
  color:var(--rm-ink);max-width:24ch;margin:0 auto clamp(1rem,1.6vw,1.4rem);
}
.rm-post__meta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em 1em;
}
.rm-post__cat{
  font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rm-sage-tx);text-decoration:none;transition:color .3s var(--rm-ease);
}
a.rm-post__cat:hover{color:var(--rm-accent)}
.rm-post__date,.rm-post__byline{
  font-size:.86rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rm-faded);
}
.rm-post__byline a{color:var(--rm-ink);text-decoration:none;border-bottom:1px solid rgba(20,31,39,.25)}
.rm-post__byline a:hover{border-bottom-color:var(--rm-accent)}

.rm-post__body{max-width:44rem;margin:clamp(2.25rem,3.5vw,3rem) auto 0}
.rm-post__body p{
  font-size:1.08rem;line-height:1.7;color:var(--rm-ink);margin:0 0 1.35em;
}
.rm-post__body h2{
  font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;
  color:var(--rm-ink);margin:clamp(2.5rem,4vw,3.25rem) 0 clamp(.9rem,1.4vw,1.2rem);
}
.rm-post__body h3{
  font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:500;letter-spacing:-.01em;line-height:1.3;
  color:var(--rm-ink);margin:clamp(1.75rem,3vw,2.25rem) 0 clamp(.6rem,1vw,.85rem);
}
.rm-post__body ul{margin:0 0 1.5em;display:flex;flex-direction:column;gap:.9em}
.rm-post__body ul li{
  font-size:1.08rem;line-height:1.65;color:var(--rm-ink);padding-left:1.4em;position:relative;
}
.rm-post__body ul li::before{
  content:'';position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--rm-sage);
}
.rm-post__body strong{font-weight:500}
.rm-post__body a{
  color:var(--rm-ink);text-decoration:none;
  border-bottom:1px solid rgba(20,31,39,.3);
  transition:border-color .3s var(--rm-ease);
}
.rm-post__body a:hover{border-bottom-color:var(--rm-accent)}

.rm-post__foot{
  max-width:44rem;margin:clamp(2.5rem,4vw,3.5rem) auto 0;
  padding-top:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid rgba(20,31,39,.12);
}
.rm-post__author{font-size:1rem;line-height:1.6;color:var(--rm-ink);margin:0 0 1.25em}
.rm-post__disclaimer{
  font-size:.9rem;line-height:1.65;color:var(--rm-faded);margin:0 0 1.5em;
}
.rm-post__tags{display:flex;flex-wrap:wrap;gap:.6em .7em}
.rm-post__tags a{
  font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rm-ink);text-decoration:none;
  border:1px solid rgba(20,31,39,.22);border-radius:999px;padding:.5em 1.1em;
  transition:border-color .3s var(--rm-ease),color .3s var(--rm-ease);
}
.rm-post__tags a:hover{border-color:var(--rm-sage);color:var(--rm-sage-tx)}

/* previous / next. Handles one-sided, which the Squarespace version
   could not: with a single sibling the remaining link keeps its
   column rather than stretching across the row. */
.rm-postnav{
  max-width:44rem;margin:0 auto;
  padding:clamp(1.5rem,2.5vw,2rem) var(--rm-gutter) clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);
  border-top:1px solid rgba(20,31,39,.12);
}
.rm-postnav__link{display:block;text-decoration:none}
.rm-postnav__link--next{grid-column:2;text-align:right}
.rm-postnav__dir{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rm-sage-tx);margin-bottom:.6em;
}
.rm-postnav__title{
  display:block;font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;
  letter-spacing:-.015em;line-height:1.25;color:var(--rm-ink);
  transition:color .3s var(--rm-ease);
}
.rm-postnav__link:hover .rm-postnav__title{color:var(--rm-sage-tx)}

@media (max-width:860px){
  .rm-post__h{max-width:none}
  .rm-postnav{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .rm-postnav__link--next{grid-column:1;text-align:left}
}


/* ------------------------------------------------------------
   21. CONTACT  (.rm-contact) + ONCORD FORM RESET
   The Squarespace version of this module carried 60 lines styling
   .sqs-block-form for a form that never existed on the page. That
   is gone. This is a real Oncord form: submissions become contact
   records, not just an email.

   Oncord renders forms as a grey panel wrapping a two column
   label/field table. It has to be collapsed before it can be
   styled, and !important is genuinely required because Oncord's
   own rules load after custom stylesheets.
   ------------------------------------------------------------ */
.rm-contact{background:var(--rm-cream);padding:clamp(4rem,8vw,8rem) var(--rm-gutter)}
.rm-contact__inner{
  max-width:var(--rm-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,7vw,7rem);align-items:start;
}
.rm-contact__eyebrow{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rm-sage-tx);margin-bottom:clamp(20px,2.5vw,30px);
}
.rm-contact__h{
  font-size:clamp(2.4rem,4.6vw,4rem);font-weight:500;letter-spacing:-.03em;line-height:1.02;
  color:var(--rm-ink);margin:0 0 clamp(1.5rem,3vw,2.5rem);max-width:14ch;
}
.rm-contact__h .l2{color:var(--rm-sage)}
.rm-contact__intro{
  font-size:1.08rem;line-height:1.6;color:var(--rm-ink);max-width:42ch;
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
}
.rm-contact__detail{margin-bottom:1.5rem}
.rm-contact__detail-label{
  display:block;font-size:var(--rm-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rm-sage-tx);margin-bottom:8px;
}
.rm-contact__detail a,.rm-contact__detail span{font-size:1.05rem;color:var(--rm-ink);text-decoration:none}
.rm-contact__detail a{border-bottom:1px solid rgba(20,31,39,.25);transition:border-color .3s var(--rm-ease)}
.rm-contact__detail a:hover{border-bottom-color:var(--rm-accent)}

/* --- collapse Oncord's panel and table --- */
.rm-form,.rm-form div,.rm-form form,.rm-form table,
.rm-form tbody,.rm-form tr,.rm-form td,.rm-form th{
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent;
}
.rm-form table,.rm-form tbody,.rm-form tr,.rm-form td,.rm-form th{
  display:block !important;width:100% !important;
  border:0 !important;margin:0 !important;padding:0 !important;text-align:left !important;
}
.rm-form tr{margin-bottom:clamp(18px,2.4vw,26px) !important}
.rm-form th,.rm-form label{
  display:block !important;
  font-family:var(--rm-font) !important;
  font-size:var(--rm-eyebrow) !important;font-weight:500 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  color:var(--rm-sage-tx) !important;
  margin:0 0 9px !important;
}
.rm-form input:not([type="submit"]):not([type="button"]),
.rm-form textarea,
.rm-form select{
  width:100% !important;box-sizing:border-box !important;
  font-family:var(--rm-font) !important;font-size:1rem !important;
  color:var(--rm-ink) !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(20,31,39,.28) !important;
  border-radius:0 !important;
  padding:13px 0 14px !important;
  box-shadow:none !important;
  transition:border-color .3s var(--rm-ease) !important;
}
.rm-form input:focus,.rm-form textarea:focus,.rm-form select:focus{
  border-bottom-color:var(--rm-sage) !important;outline:none !important;
}
.rm-form textarea{min-height:120px !important;resize:vertical !important}
.rm-form input[type="submit"],
.rm-form button[type="submit"],
.rm-form .submitbutton{
  display:inline-flex !important;align-items:center !important;
  width:auto !important;cursor:pointer !important;
  padding:1em 2.2em !important;border-radius:999px !important;
  font-family:var(--rm-font) !important;font-size:.82rem !important;font-weight:500 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  background:transparent !important;color:var(--rm-ink) !important;
  border:1px solid rgba(20,31,39,.45) !important;
  transition:background .4s var(--rm-ease),color .4s var(--rm-ease),border-color .4s var(--rm-ease) !important;
}
.rm-form input[type="submit"]:hover,
.rm-form button[type="submit"]:hover,
.rm-form .submitbutton:hover{
  background:var(--rm-accent) !important;color:#fff !important;border-color:var(--rm-accent) !important;
}
.rm-form__success h3{
  font-size:clamp(1.4rem,2vw,1.8rem);font-weight:500;letter-spacing:-.02em;
  color:var(--rm-ink);margin:0 0 .6em;
}
.rm-form__success p{font-size:var(--rm-body);line-height:1.6;color:var(--rm-ink)}

@media (max-width:860px){
  .rm-contact__inner{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .rm-contact__h,.rm-contact__intro{max-width:none}
}


/* ------------------------------------------------------------
   22. ANIMATION LAYER  (.rm-fx)
   Content is visible by default. The stylesheet only hides anything
   once ridgemark.js has added .rm-fx--ready to <html>, so a blocked
   or failed script leaves the whole site readable.
   ------------------------------------------------------------ */
html.rm-fx--ready .rm-fx{
  opacity:0;
  transform:translateY(clamp(40px,4.5vw,60px));
  transition:opacity 1.5s cubic-bezier(0.16,1,0.3,1),
             transform 1.5s cubic-bezier(0.16,1,0.3,1);
  transition-delay:calc(var(--rm-fx-i,0) * 170ms);
  will-change:opacity,transform;
}
html.rm-fx--ready .rm-fx.rm-fx--in{opacity:1;transform:none}
.rm-hero,.rm-hero *,.rm-svchero,.rm-svchero *{opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion:reduce){
  html.rm-fx--ready .rm-fx{opacity:1 !important;transform:none !important;transition:none !important}
}


/* ------------------------------------------------------------
   PRINT
   ------------------------------------------------------------ */
@media print{
  .rm-head,.rm-close,.rm-postnav,.rm-fnfilter,.rm-marquee{display:none}
  .rm-main{padding-top:0}
  body{color:#000;background:#fff}
}
