@charset "UTF-8";
/* RWD — editorial pages
   ==========================================================================
   The long-read pages: Landowners, Channel Partners, the NRI Guide and
   Insights. One sheet for all four rather than one per page, because they are
   the same kind of document — a proposition, then the substance, then a way
   to start a conversation — and four sheets would drift the way the three
   card designs did.

   Scoped to .rwd-editorial, not to a page id. Every scoped-to-an-id sheet on
   this site has now cost something: pages.css matched nothing on /projects/
   because the wrapper was missing, projects.css could not dress the homepage,
   and hero.css hid the site's own header everywhere but the homepage. A class
   travels; an id does not.

   The home page's system throughout: bone ground, one muted gold on every
   label and rule, Playfair for anything read as a voice and Jost for anything
   read as a label. Hairlines, never boxes. One left edge.
   ========================================================================= */

.rwd-editorial{
  --bone:#F3F0E9;
  --bone-2:#EAE5D9;
  --ink-1:#100F0E;
  --bark:#2B211A;
  --gold:#B08D57;
  --gold-lt:#CBAE80;
  --rule:rgba(16,15,14,.14);
  --rule-i:rgba(255,255,255,.14);
  --say:#2E2B27;
  --mute:#6C6860;
  --mute-i:#A7A199;
  --paper-i:#F4F1EA;

  background:var(--bone);
  color:var(--say);
}

.rwd-editorial .ed-in{
  max-width:1180px; margin:0 auto;
  padding-inline:clamp(24px,3.4vw,52px);
}
.rwd-editorial .ed-narrow{ max-width:760px }

/* ---- Hero ---------------------------------------------------------------
   Type on bone, not a picture: these pages are arguments, and a stock photo
   at the top of an argument is an apology for it. */
.rwd-editorial .ed-hero{
  padding-block:clamp(56px,9vh,116px) clamp(34px,5vh,62px);
  border-bottom:1px solid var(--rule);
}
.rwd-editorial .ed-eyebrow{
  display:flex; align-items:center; gap:12px; margin:0 0 clamp(18px,2.4vh,26px);
  font:500 16px/1 var(--lux-sans); letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
}
.rwd-editorial .ed-eyebrow .dots i{ width:6px; height:6px }
.rwd-editorial .ed-hero h1{
  margin:0; max-width:19ch;
  font:400 clamp(34px,4.6vw,66px)/1.04 var(--lux);
  letter-spacing:-.015em; color:var(--ink-1); text-wrap:balance;
}
.rwd-editorial .ed-hero h1 em{ font-style:italic; color:var(--gold) }
.rwd-editorial .ed-lede{
  margin:clamp(22px,3vh,32px) 0 0; max-width:62ch;
  padding-left:20px; border-left:1px solid var(--gold);
  font:400 clamp(16px,1.15vw,17.5px)/1.75 var(--lux-sans); color:var(--mute);
}

/* ---- Sections ----------------------------------------------------------- */
.rwd-editorial .ed-sec{ padding-block:clamp(52px,8vh,104px) }
.rwd-editorial .ed-sec + .ed-sec{ padding-top:0 }
.rwd-editorial .ed-head{
  display:flex; align-items:baseline; gap:clamp(14px,2vw,26px);
  margin-bottom:clamp(26px,3.6vh,42px);
  padding-bottom:16px; border-bottom:1px solid var(--rule);
}
.rwd-editorial .ed-n{
  font:500 16px/1 var(--lux-sans); letter-spacing:.26em; color:var(--gold); flex:none;
}
.rwd-editorial .ed-head h2{
  margin:0; font:400 clamp(23px,2.6vw,38px)/1.1 var(--lux); color:var(--ink-1);
}
.rwd-editorial .ed-head h2 em{ font-style:italic; color:var(--gold) }

.rwd-editorial .ed-body p{
  margin:0 0 clamp(16px,2vh,22px); max-width:66ch;
  font:400 clamp(16px,1.1vw,16.5px)/1.78 var(--lux-sans); color:var(--say);
}
.rwd-editorial .ed-body p:last-child{ margin-bottom:0 }
.rwd-editorial .ed-body strong{ font-weight:500; color:var(--ink-1) }
.rwd-editorial .ed-body a{ color:var(--ink-1); border-bottom:1px solid var(--gold) }

/* ---- Ruled list, numbered ------------------------------------------------ */
.rwd-editorial .ed-steps{ list-style:none; counter-reset:s; margin:0; padding:0 }
.rwd-editorial .ed-steps li{
  counter-increment:s; position:relative;
  display:grid; grid-template-columns:clamp(42px,4.2vw,66px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);
  padding:clamp(20px,2.8vh,30px) 0; border-top:1px solid var(--rule);
}
.rwd-editorial .ed-steps li:last-child{ border-bottom:1px solid var(--rule) }
.rwd-editorial .ed-steps li::before{
  content:counter(s,decimal-leading-zero); padding-top:.32em;
  font:500 16px/1 var(--lux-sans); letter-spacing:.2em; color:var(--gold);
}
.rwd-editorial .ed-steps h3{
  margin:0 0 9px; font:400 clamp(18px,1.7vw,25px)/1.2 var(--lux); color:var(--ink-1);
}
.rwd-editorial .ed-steps p{
  margin:0; max-width:58ch;
  font:400 16px/1.76 var(--lux-sans); color:var(--mute);
}

/* ---- Plain ruled list ---------------------------------------------------- */
.rwd-editorial .ed-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 clamp(24px,3vw,52px);
}
.rwd-editorial .ed-list li{
  display:flex; align-items:baseline; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--rule);
  font:400 16px/1.6 var(--lux-sans); color:var(--say);
}
.rwd-editorial .ed-list li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--gold); transform:translateY(-3px);
}

/* ---- Question and answer -------------------------------------------------
   The NRI guide is mostly this. Open by default: a guide whose answers are
   all folded away is a guide that does not want to be read, and every answer
   here is short enough to sit in the open. */
.rwd-editorial .ed-qa{ margin:0 }
.rwd-editorial .ed-qa > div{ padding:clamp(20px,2.8vh,30px) 0; border-top:1px solid var(--rule) }
.rwd-editorial .ed-qa > div:last-child{ border-bottom:1px solid var(--rule) }
.rwd-editorial .ed-qa h3{
  margin:0 0 11px; max-width:52ch;
  font:400 clamp(17px,1.5vw,22px)/1.3 var(--lux); color:var(--ink-1);
}
.rwd-editorial .ed-qa p{
  margin:0 0 12px; max-width:64ch;
  font:400 16px/1.78 var(--lux-sans); color:var(--mute);
}
.rwd-editorial .ed-qa p:last-child{ margin-bottom:0 }
.rwd-editorial .ed-qa b{ font-weight:500; color:var(--say) }

/* ---- Dark band ----------------------------------------------------------- */
.rwd-editorial .ed-dark{ background:var(--ink-1); color:var(--paper-i) }
.rwd-editorial .ed-dark .ed-head{ border-bottom-color:var(--rule-i) }
.rwd-editorial .ed-dark .ed-head h2{ color:var(--paper-i) }
.rwd-editorial .ed-dark .ed-n{ color:var(--gold-lt) }
.rwd-editorial .ed-dark .ed-body p{ color:rgba(244,241,234,.8) }
.rwd-editorial .ed-dark .ed-list li{ color:rgba(244,241,234,.86); border-bottom-color:var(--rule-i) }
.rwd-editorial .ed-dark .ed-steps li{ border-top-color:var(--rule-i) }
.rwd-editorial .ed-dark .ed-steps li:last-child{ border-bottom-color:var(--rule-i) }
.rwd-editorial .ed-dark .ed-steps h3{ color:var(--paper-i) }
.rwd-editorial .ed-dark .ed-steps p{ color:var(--mute-i) }

/* ---- Forms ---------------------------------------------------------------
   Underlined fields, not boxes — the same hairline logic as everything else.
   A boxed form on a page of rules reads as an interruption. */
.rwd-editorial .ed-form{
  display:grid; gap:clamp(20px,2.6vw,32px) clamp(22px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.rwd-editorial .ed-form label{ display:grid; gap:9px }
.rwd-editorial .ed-form .wide{ grid-column:1/-1 }
.rwd-editorial .ed-form label > span{
  font:500 16px/1 var(--lux-sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute);
}
.rwd-editorial .ed-form input,
.rwd-editorial .ed-form select,
.rwd-editorial .ed-form textarea{
  width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--rule);
  background:transparent; color:var(--ink-1);
  font:400 16px/1.5 var(--lux-sans); border-radius:0;
}
.rwd-editorial .ed-form textarea{ resize:vertical; min-height:96px }
.rwd-editorial .ed-form input:focus,
.rwd-editorial .ed-form select:focus,
.rwd-editorial .ed-form textarea:focus{ outline:0; border-bottom-color:var(--gold) }
.rwd-editorial .ed-form input[type="file"]{ padding:12px 0; font-size:16px; color:var(--mute) }
.rwd-editorial .ed-form .ed-act{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.rwd-editorial .ed-form .f-note{
  grid-column:1/-1; margin:0;
  font:400 16px/1.7 var(--lux-sans); color:var(--mute);
}

/* ---- Buttons -------------------------------------------------------------
   Stated here because every button style on this site is scoped to a page id
   and none of those ids is on these pages — which is exactly how .btn-solid
   came out signal green and .btn-line came out as plain text. */
.rwd-editorial .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; border:1px solid transparent;
  font:500 16px/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase;
  transition:background .3s, border-color .3s, color .3s;
}
.rwd-editorial .btn-solid{ background:var(--ink-1); color:var(--paper-i); border-color:var(--ink-1) }
.rwd-editorial .btn-solid:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink-1) }
.rwd-editorial .btn-line{ background:transparent; color:var(--ink-1); border-color:var(--rule) }
.rwd-editorial .btn-line:hover{ border-color:var(--gold); color:var(--gold) }
.rwd-editorial .ed-dark .btn-solid{ background:var(--paper-i); color:var(--ink-1); border-color:var(--paper-i) }
.rwd-editorial .ed-dark .btn-solid:hover{ background:var(--gold); border-color:var(--gold) }
.rwd-editorial .ed-dark .btn-line{ color:var(--paper-i); border-color:var(--rule-i) }
.rwd-editorial .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* ---- Pending confirmation ------------------------------------------------
   Same device the project sheet uses: deliberately plain and slightly
   uncomfortable, so it is obvious in a client review and obvious that it is
   meant to come off. */
.rwd-editorial .ed-prov{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  margin:clamp(22px,3vh,32px) 0 0; padding:12px 16px;
  border-left:3px solid #C9A227; background:#FBF6E4;
  font:400 16px/1.65 var(--lux-sans); color:#5A4A12;
}
.rwd-editorial .ed-prov b{
  font:500 16px/1 var(--lux-sans); letter-spacing:.14em; text-transform:uppercase;
  color:#8A6D12;
}

/* ---- Empty index --------------------------------------------------------- */
.rwd-editorial .ed-empty{
  padding:clamp(40px,6vh,72px) 0; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.rwd-editorial .ed-empty p{
  margin:0 0 14px; max-width:60ch;
  font:400 16px/1.75 var(--lux-sans); color:var(--mute);
}

/* ---- Close --------------------------------------------------------------- */
.rwd-editorial .ed-close{
  padding-block:clamp(56px,8vh,110px); text-align:center;
  border-top:1px solid var(--rule);
}
.rwd-editorial .ed-dark .ed-close{ border-top-color:var(--rule-i) }
.rwd-editorial .ed-close h2{
  margin:0 auto; max-width:20ch;
  font:400 clamp(25px,3vw,44px)/1.14 var(--lux); color:var(--ink-1);
}
.rwd-editorial .ed-dark .ed-close h2{ color:var(--paper-i) }
.rwd-editorial .ed-close h2 em{ font-style:italic; color:var(--gold) }
.rwd-editorial .ed-close-act{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:clamp(24px,3.2vh,34px);
}

/* ---- Motion --------------------------------------------------------------
   Both halves gated on html.js. Gating only the hiding rule gives it a type
   selector its override does not have, which is how the homepage shipped
   invisible. */
@media (prefers-reduced-motion:no-preference){
  html.js .rwd-editorial .rv{
    transform:translateY(24px);
    transition:opacity .8s ease, transform 1s cubic-bezier(.22,.61,.36,1);
  }
  html.js .rwd-editorial .rv.in{ transform:none }
}

/* ==== Second pass ==========================================================
   One left edge, numbers you can see, fields you can find.

   - Narrow sections used to be a 760px column centred in the page, so their
     left edge sat ~200px in from the hero's and the wide sections' — the page
     zig-zagged. They now share the hero's edge; only the reading measure stays
     narrow.
   - Section numbers were 16px tracked caps; they are now gold numerals the
     size of the heading beside them, as on the Projects page.
   - Form fields were hairlines on bone, easy to miss; they are white boxes
     with a label in gold, like the Projects filter.
   - Buttons are pills, as everywhere else on the site now.
   ========================================================================= */
.rwd-editorial .ed-narrow{ max-width:1180px }
.rwd-editorial .ed-narrow .ed-body,
.rwd-editorial .ed-narrow .ed-form,
.rwd-editorial .ed-narrow .ed-prov,
.rwd-editorial .ed-narrow .ed-qa,
.rwd-editorial .ed-narrow .ed-list{ max-width:820px }

.rwd-editorial .ed-lede{ color:var(--say); font-size:clamp(17px,1.25vw,19px) }

.rwd-editorial .ed-head{ align-items:center; gap:clamp(16px,2vw,28px) }
.rwd-editorial .ed-n{
  padding-right:clamp(16px,2vw,26px); border-right:2px solid var(--gold);
  font:600 clamp(36px,3.6vw,54px)/1 var(--lux); letter-spacing:0; color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
}
.rwd-editorial .ed-dark .ed-n{ border-right-color:var(--gold-lt) }
.rwd-editorial .ed-head h2{ font-size:clamp(30px,3.2vw,48px) }

.rwd-editorial .ed-body p{ font-size:clamp(17px,1.2vw,18px) }
.rwd-editorial .ed-steps li::before{
  padding-top:.08em; font:600 clamp(24px,2vw,30px)/1 var(--lux); letter-spacing:0;
}
.rwd-editorial .ed-steps h3{ font-weight:600; font-size:clamp(20px,1.8vw,26px) }
.rwd-editorial .ed-steps p{ font-size:17px; color:var(--say) }
.rwd-editorial .ed-dark .ed-steps p{ color:rgba(244,241,234,.78) }
.rwd-editorial .ed-qa p{ font-size:17px; color:var(--say) }

/* Fields */
.rwd-editorial .ed-form{ gap:22px clamp(18px,2.4vw,28px) }
.rwd-editorial .ed-form label{ gap:10px }
.rwd-editorial .ed-form label > span{
  font:700 16px/1.2 var(--lux-sans); letter-spacing:.1em; color:var(--gold-deep,#8A6B3C);
}
.rwd-editorial .ed-form label > span em{ font-style:normal; font-weight:500; letter-spacing:.04em; text-transform:none; color:var(--mute) }
.rwd-editorial .ed-form input,
.rwd-editorial .ed-form select,
.rwd-editorial .ed-form textarea{
  height:54px; padding:0 16px; background:#fff;
  border:1px solid rgba(16,15,14,.16); border-radius:12px;
  font:500 17px/1.4 var(--lux-sans); color:var(--ink-1);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rwd-editorial .ed-form textarea{ height:auto; min-height:130px; padding:14px 16px; line-height:1.6 }
.rwd-editorial .ed-form select{
  appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238A6B3C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/14px;
}
.rwd-editorial .ed-form ::placeholder{ color:#9A958C; opacity:1 }
.rwd-editorial .ed-form input:hover,
.rwd-editorial .ed-form select:hover,
.rwd-editorial .ed-form textarea:hover{ border-color:var(--gold) }
.rwd-editorial .ed-form input:focus,
.rwd-editorial .ed-form select:focus,
.rwd-editorial .ed-form textarea:focus{ outline:0; border-color:var(--ink-1); box-shadow:0 0 0 3px rgba(176,141,87,.22) }
.rwd-editorial .ed-form .f-note{ font-size:17px; color:var(--say) }
.rwd-editorial .ed-form .f-note a{ color:var(--ink-1); border-bottom:1px solid var(--gold) }
.rwd-editorial .ed-form .wide{ grid-column:1/-1 }

/* Buttons */
.rwd-editorial .btn{ border-radius:999px; padding:17px 30px; letter-spacing:.1em; font-weight:600 }
.rwd-editorial .btn-line{ border-color:var(--ink-1) }
.rwd-editorial .btn-line:hover{ background:var(--ink-1); color:var(--paper-i); border-color:var(--ink-1) }
.rwd-editorial .ed-dark .btn-line{ border-color:rgba(244,241,234,.5) }

.rwd-editorial .ed-close h2{ font-size:clamp(30px,3.4vw,52px) }
/* Two columns, not as many as fit: three made a long label like "Survey /
   PIN code (optional)" wrap and drop its box below its neighbours'. Boxes
   sit on the row's bottom edge so a wrapped label never misaligns them. */
.rwd-editorial .ed-form{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end }
@media (max-width:640px){ .rwd-editorial .ed-form{ grid-template-columns:minmax(0,1fr) } }

/* ---- Project cards (Channel Partners: open for registration) ------------ */
.rwd-editorial .ed-projs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:20px;
}
.rwd-editorial .ed-projs a{
  display:flex; flex-direction:column; height:100%; text-decoration:none; color:var(--ink-1);
  background:#fff; border:1px solid var(--rule); border-radius:14px; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rwd-editorial .ed-projs a:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(43,33,26,.12); border-color:var(--gold) }
.rwd-editorial .ed-projs img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--bone-2) }
.rwd-editorial .ed-projs-k{
  margin:20px 22px 0; font:700 16px/1.3 var(--lux-sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep,#8A6B3C);
}
.rwd-editorial .ed-projs b{ margin:8px 22px 0; font:600 clamp(22px,1.8vw,26px)/1.2 var(--lux) }
.rwd-editorial .ed-projs-loc{ margin:6px 22px 0; font:400 17px/1.4 var(--lux-sans); color:var(--say) }
.rwd-editorial .ed-projs-go{
  margin:auto 22px 22px; padding-top:18px;
  font:600 16px/1 var(--lux-sans); color:var(--ink-1);
}
.rwd-editorial .ed-projs-go i{ font-style:normal; color:var(--gold); transition:margin .25s ease }
.rwd-editorial .ed-projs a:hover .ed-projs-go i{ margin-left:6px }

/* The privacy line (lead-forms.js) under the button row, full width. */
.rwd-editorial .ed-form .f-privacy{ grid-column:1/-1; margin:0; font-size:16px; opacity:.85 }