/*
Theme Name:   Nexus Redevelopment
Theme URI:    https://nexusredevelopment.com
Description:  Child theme of Hello Elementor for Nexus Redevelopment. Holds the whole
              site design system. Edit this file to change the site's look — it is the
              single source of truth for colours, type, and layout.
Author:       MyWebChef
Author URI:   https://mywebchef.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  nexus-redevelopment
*/


/* ============================================================
   NEXUS DEVELOPMENT
   Concept: a surveyor's drafting sheet. Hairline rules, corner
   ticks, dimension marks and mono field labels frame real
   photography — the vernacular of land development itself.
   Single committed light world; every colour painted explicitly.
   ============================================================ */
:root{
  --ground:#E9EBE8;
  --sheet:#F7F8F6;
  --sheet-2:#E2E5E1;
  --ink:#1B2320;
  --ink-band:#141B18;
  --scrim:#0C1210;
  --ink-2:#4C5852;   /* 6.2:1 on --ground */
  --ink-3:#5F6B64;   /* 4.6:1 on --ground */
  --rule:#C6CCC7;
  --rule-soft:#D8DCD8;
  --accent:#14675C;
  --accent-deep:#0E4C43;
  --accent-tint:#DDE7E4;
  --accent-lift:#8FCFC2;
  --on-dark:#E5E9E5;
  --on-dark-2:#A9B5AF;
  --flag:#B4552A;

  --shell:1280px;
  --gut:clamp(20px,4.2vw,64px);
  --band:clamp(64px,8vw,116px);

  --f-display:"Chivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --f-mono:"Chivo Mono","SFMono-Regular",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:19px;
  line-height:1.72;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- typography ---------- */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.025em;line-height:1.03;color:var(--ink)}
h1{font-size:clamp(2.45rem,5.4vw,4.3rem)}
h2{font-size:clamp(1.95rem,3.5vw,2.9rem);line-height:1.06}
h3{font-size:clamp(1.3rem,1.9vw,1.6rem);letter-spacing:-.018em;line-height:1.15}
h4{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
a{color:var(--accent-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
strong{font-weight:600}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

.lede{font-size:clamp(1.2rem,1.65vw,1.42rem);line-height:1.6;color:var(--ink);max-width:34ch}
.lede--wide{max-width:46ch}
.prose{max-width:66ch;display:flex;flex-direction:column;gap:1.1em}
.prose p{color:var(--ink-2)}
.muted{color:var(--ink-2)}

.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1.5}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.on-dark .eyebrow{color:var(--accent-lift)}

/* ---------- shell / bands ---------- */
.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut);position:relative}
.band{padding-block:var(--band);position:relative}
.band+.band{border-top:1px solid var(--rule)}
.band--sheet{background:var(--sheet)}
.band--sheet+.band--sheet{border-top:1px solid var(--rule-soft)}
.hero+.band,.phero+.band{border-top:1px solid var(--rule)}

/* dark surfaces: .on-dark carries the typography, .band--ink the flat ground */
.on-dark{color:var(--on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark .lede{color:var(--on-dark)}
.on-dark .muted,.on-dark .prose p{color:var(--on-dark-2)}
.on-dark a{color:var(--accent-lift)}
.on-dark a:hover{color:#fff}
.band--ink,.band+.band--ink,.hero+.band--ink,.phero+.band--ink{background:var(--ink-band);border-top:none}

/* drafting corner ticks */
.ticks::before,.ticks::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;z-index:3;
  border-color:rgba(143,207,194,.5);border-style:solid;
}
.ticks::before{top:18px;left:18px;border-width:1px 0 0 1px}
.ticks::after{bottom:18px;right:18px;border-width:0 1px 1px 0}

/* full-bleed photographic band */
.band--photo{background:var(--ink-band);overflow:hidden;isolation:isolate}
.band__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band__scrim{position:absolute;inset:0;z-index:1}
.band--photo>.wrap{z-index:2}

.stack{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,34px)}
.stack--tight{gap:16px}
.hd{display:flex;flex-direction:column;gap:16px;max-width:60ch}

/* film grain — keeps large flat photo areas from looking digitally clean */
.grain::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--sheet);border-bottom:1px solid var(--rule)}
.masthead__in{max-width:var(--shell);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:24px;min-height:80px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink);margin-right:auto;flex:none}
.brand__n{font-family:var(--f-display);font-weight:900;font-size:1.32rem;letter-spacing:.02em;text-transform:uppercase}
.brand__d{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.brand:hover .brand__n{color:var(--accent-deep)}

.nav{display:flex;align-items:center;gap:2px}
.nav a{
  font-family:var(--f-display);font-size:.895rem;font-weight:600;
  color:var(--ink);text-decoration:none;padding:13px 12px;border-radius:2px;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav a:hover{background:var(--sheet-2);color:var(--accent-deep)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent-deep)}
/* the login CTA is an anchor inside .nav — restate the button styling at higher
   specificity so `.nav a` cannot claim its padding, colour, or border */
.nav a.nav__login{
  margin-left:10px;padding:12px 18px;font-size:.88rem;font-weight:700;
  background:var(--ink);color:var(--sheet);border:1.5px solid var(--ink);border-radius:2px;
}
.nav a.nav__login:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}

.burger{display:none;background:var(--sheet);border:1px solid var(--rule);color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;padding:14px 18px;cursor:pointer;border-radius:2px}
.burger:hover{border-color:var(--accent)}

@media (max-width:1120px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--sheet);border-bottom:1px solid var(--rule);padding:8px var(--gut) 22px;
    box-shadow:0 24px 40px -28px rgba(20,27,24,.5);
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 4px;font-size:1.06rem;border-bottom:1px solid var(--rule-soft)}
  .nav a[aria-current="page"]{border-bottom-color:var(--accent)}
  .nav a.nav__login{margin:16px 0 0;padding:16px 18px;font-size:1rem;text-align:center;display:block}
  .burger{display:block}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-display);font-size:1rem;font-weight:700;
  padding:17px 28px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--sheet);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;transform:translateY(-1px)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--sheet)}
/* buttons on dark surfaces are anchors, so `.on-dark a` would otherwise claim
   their text colour — restate it at matching specificity */
.on-dark a.btn{color:var(--sheet)}
.on-dark a.btn--accent{color:#fff}
.on-dark a.btn--line{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.on-dark a.btn:hover{color:#fff}
.on-dark a.btn--line:hover{background:#fff;color:var(--scrim);border-color:#fff}
.btn--sm{padding:11px 18px;font-size:.88rem}
.btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.tlink{
  font-family:var(--f-display);font-weight:700;font-size:.95rem;color:var(--accent-deep);
  text-decoration:none;display:inline-flex;align-items:center;gap:.5em;
  border-bottom:1.5px solid var(--accent);padding-bottom:3px;width:fit-content;
}
.tlink:hover{color:var(--ink);border-bottom-color:var(--ink)}
.tlink::after{content:"\2192 ";transition:transform .18s ease}
.tlink:hover::after{transform:translateX(4px)}
.on-dark .tlink{color:var(--accent-lift);border-bottom-color:var(--accent-lift)}
.on-dark .tlink:hover{color:#fff;border-bottom-color:#fff}

/* ---------- photographic hero ---------- */
.phero{position:relative;isolation:isolate;background:var(--ink-band);overflow:hidden;display:flex;align-items:flex-end;min-height:min(80vh,760px)}
/* the hero photography is dusk/low-light; a small lift keeps the skyline
   readable once the scrim is over it */
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(1.10) saturate(1.04)}
.phero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(12,18,16,.91) 0%,rgba(12,18,16,.80) 42%,rgba(12,18,16,.40) 72%,rgba(12,18,16,.14) 100%),
    linear-gradient(to top,rgba(12,18,16,.66),rgba(12,18,16,0) 48%);
}
.phero__in{position:relative;z-index:3;width:100%;padding-block:clamp(76px,11vw,140px) clamp(52px,6vw,80px)}
.phero__copy{display:flex;flex-direction:column;gap:26px;max-width:min(56ch,100%)}
.phero h1{max-width:15ch}
.phero__note{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);border-top:1px solid rgba(169,181,175,.34);padding-top:14px;max-width:52ch;line-height:1.65}
.phero--short{min-height:min(62vh,560px)}
/* The eyebrow is small text sitting directly on photography. The standard mint
   clears AA on the flat ink bands but not over the brighter hero images, so it
   gets a lighter tint of the same hue here — measured worst-case 5.6:1. */
.phero .eyebrow{color:#C2EDE3}
/* Photo credits live in the footer, not over the hero. Pexels requires no
   attribution; Unsplash's API terms do, and the footer credits block satisfies
   that site-wide without putting a watermark on the client's brand image. */
.phero__credit{display:none}

/* stat strip that breaks the grid, riding up over the hero edge */
.statlift{position:relative;z-index:20;margin-top:clamp(-56px,-4vw,-30px)}
.statlift .inner{background:var(--sheet);border:1px solid var(--rule);padding:clamp(18px,2.2vw,30px) clamp(20px,2.6vw,34px)}

/* ---------- figures (real photography) ---------- */
.fig{margin:0;display:flex;flex-direction:column;gap:9px}
.fig__frame{position:relative;overflow:hidden;background:var(--sheet-2);border:1px solid var(--rule)}
.fig__frame img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ratio,4/3);filter:saturate(.88) contrast(1.04)}
.fig--wide{--ratio:16/9}
.fig--tall{--ratio:3/4}
.fig--sq{--ratio:1/1}
.fig figcaption{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;line-height:1.6;
}
.fig figcaption .cred{color:var(--ink-3);opacity:.78;white-space:nowrap}
.on-dark .fig figcaption,.on-dark .fig figcaption .cred{color:var(--on-dark-2)}
.on-dark .fig__frame{border-color:rgba(169,181,175,.4)}
/* small field label riding on the frame, like a drawing callout */
.fig__tag{
  position:absolute;top:0;left:0;z-index:3;background:var(--ink);color:var(--on-dark);
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
  padding:6px 10px;font-weight:500;
}
.portrait img{filter:grayscale(1) contrast(1.06) brightness(.99)}

/* ---------- stats / dimension line ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats--ruled{border-top:1px solid var(--rule)}
@media (max-width:860px){.stats,.stats--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats,.stats--3{grid-template-columns:1fr}}
.stat{padding:22px 26px 22px 0;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.stat:last-child{border-right:none}
.stat+.stat{padding-left:26px}
@media (max-width:860px){
  .stat{border-bottom:1px solid var(--rule)}
  .stat:nth-child(2n){border-right:none}
  .stat:nth-child(2n+1){padding-left:0}
  .stat:nth-child(2n){padding-left:26px}
}
@media (max-width:520px){.stat,.stat+.stat{border-right:none;padding-left:0}}
.stat__v{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.stat__k{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);line-height:1.55;max-width:23ch}
.on-dark .stats--ruled{border-top-color:rgba(169,181,175,.4)}
.on-dark .stat{border-right-color:rgba(169,181,175,.4);border-bottom-color:rgba(169,181,175,.4)}
.on-dark .stat__k{color:var(--on-dark-2)}
.on-dark .stat__v{color:#fff}

/* ---------- grids & cards ---------- */
.cols{display:grid;gap:clamp(20px,2.4vw,32px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4.5vw,68px);align-items:start}
.split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.split,.split--rev,.split--even{grid-template-columns:1fr}}

.card{background:var(--sheet);border:1px solid var(--rule);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:13px}
.band--sheet .card{background:var(--ground)}
.card__k{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.card p{color:var(--ink-2);font-size:1.02rem;line-height:1.65}

/* project / article card with photography */
.pcard{background:var(--sheet);border:1px solid var(--rule);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease}
.band--sheet .pcard{background:var(--ground)}
a.pcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.pcard__img{position:relative;overflow:hidden}
.pcard__img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.88) contrast(1.04)}
.pcard__body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:11px}
.pcard__body p{color:var(--ink-2);font-size:1rem;line-height:1.6}
.pcard .pill{position:absolute;top:12px;left:12px;z-index:2;backdrop-filter:blur(3px)}

.pill{
  display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.15em;text-transform:uppercase;font-weight:600;padding:6px 11px;border:1px solid currentColor;width:fit-content;
}
.pill--open{color:var(--accent-deep);background:var(--accent-tint)}
.pill--soon{color:#6E5210;background:#F1EBDB}
.pill--closed{color:#3C4741;background:#DDE1DD}

/* ---------- numbered sequence (the investment process) ---------- */
.seq{display:grid;gap:0;border-top:1px solid var(--rule)}
.seq__row{
  display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(14px,2.4vw,34px);padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
@media (max-width:820px){.seq__row{grid-template-columns:54px minmax(0,1fr);row-gap:8px}
  .seq__row p{grid-column:2}}
.seq__n{font-family:var(--f-mono);font-size:.78rem;font-weight:600;letter-spacing:.12em;color:var(--accent);padding-top:.35em}
.seq__row p{color:var(--ink-2);font-size:1.03rem;line-height:1.62}
.on-dark .seq{border-top-color:rgba(169,181,175,.4)}
.on-dark .seq__row{border-bottom-color:rgba(169,181,175,.4)}
.on-dark .seq__n{color:var(--accent-lift)}
.on-dark .seq__row p{color:var(--on-dark-2)}

/* ---------- spec table (deal terms) ---------- */
.spec{width:100%;border-collapse:collapse;font-size:1rem}
.spec th,.spec td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.spec th{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600;width:44%;padding-top:16px}
/* colour is declared on the cells rather than inherited: tables do not inherit
   colour from ancestors in quirks mode, and this file ships without a doctype */
.spec td{font-family:var(--f-display);font-weight:600;font-size:1.02rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.on-dark .spec td{color:var(--on-dark)}
.on-dark .spec th{color:var(--on-dark-2)}
.on-dark .spec th,.on-dark .spec td{border-bottom-color:rgba(169,181,175,.4)}
.tablewrap{overflow-x:auto}

/* ---------- offering card ---------- */
.offer{background:var(--sheet);border:1px solid var(--ink);display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
@media (max-width:820px){.offer{grid-template-columns:1fr}}
.offer__body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px}
.offer__img{position:relative;border-left:1px solid var(--rule);overflow:hidden;min-height:300px}
@media (max-width:820px){.offer__img{border-left:none;border-top:1px solid var(--rule);min-height:240px}}
.offer__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04)}

/* ---------- people ---------- */
.person{display:flex;flex-direction:column;gap:14px}
.person__role{font-family:var(--f-display);font-weight:800;font-size:1.14rem;letter-spacing:-.015em;line-height:1.2}
.person__name{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.person p{color:var(--ink-2);font-size:1rem;line-height:1.62}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:-.012em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:19px;font-family:var(--f-mono);font-size:1.35rem;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"\2013 "}
.faq summary:hover{color:var(--accent-deep)}
.faq__a{padding:0 clamp(0px,6vw,90px) 24px 0;color:var(--ink-2);font-size:1.05rem;line-height:1.7;max-width:70ch}

/* ---------- form ---------- */
.form{display:flex;flex-direction:column;gap:20px;max-width:620px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--f-mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:1.06rem;color:var(--ink);background:var(--sheet);
  border:1px solid var(--rule);border-radius:2px;padding:15px;width:100%;min-height:52px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-tint);outline-offset:0}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field select{font-family:var(--f-display);font-weight:500}
.field__hint{font-size:.92rem;color:var(--ink-3);line-height:1.5}
.formnote{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.7;border-top:1px solid var(--rule);padding-top:14px}
.formok{background:var(--accent-tint);border:1px solid var(--accent);padding:16px 18px;font-size:1rem;color:var(--accent-deep);display:none}
.formok.is-on{display:block}
.on-dark .field label{color:var(--on-dark-2)}
.on-dark .field__hint,.on-dark .formnote{color:var(--on-dark-2)}
.on-dark .formnote{border-top-color:rgba(169,181,175,.34)}

/* ---------- contact rows ---------- */
.crow{display:flex;flex-direction:column;gap:5px;padding:18px 0;border-bottom:1px solid var(--rule)}
.crow__k{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.crow__v{font-family:var(--f-display);font-weight:600;font-size:1.08rem;line-height:1.45}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--rule);padding-bottom:18px}
.filters button{
  font-family:var(--f-mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  background:transparent;border:1px solid var(--rule);color:var(--ink-2);padding:13px 17px;cursor:pointer;border-radius:2px;
}
.filters button:hover{border-color:var(--accent);color:var(--accent-deep)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sheet)}

/* ---------- footer ---------- */
.foot{background:var(--ink-band);color:var(--on-dark);padding-block:clamp(52px,6vw,80px) 32px}
.foot h4{color:#fff;font-family:var(--f-mono);font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;font-weight:600}
.foot a{color:var(--on-dark-2);text-decoration:none;font-family:var(--f-display);font-size:.97rem;font-weight:500}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,48px)}
@media (max-width:900px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__col{display:flex;flex-direction:column;gap:13px}
.foot__brand .brand__n{color:#fff;font-size:1.5rem}
.foot__brand .brand__d{color:var(--on-dark-2)}
.legal{margin-top:clamp(38px,5vw,60px);border-top:1px solid rgba(169,181,175,.3);padding-top:26px;display:flex;flex-direction:column;gap:18px}
.legal p{font-size:.9rem;line-height:1.65;color:var(--on-dark-2);max-width:105ch}
/* Attribution has to be present (Unsplash's API terms) but it is the least
   important thing in the footer — keep it small, unlinked-looking, and out of
   the way rather than letting 29 names dominate the block. */
.credits{font-size:.72rem;line-height:1.7;color:rgba(169,181,175,.72);max-width:104ch}
.credits strong{color:rgba(169,181,175,.92);font-weight:600}
.credits a{font-family:var(--f-body);font-size:.72rem;font-weight:400;
  color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.credits a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.foot .legal>div>h4{margin-bottom:7px}
.legal__bar{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.legal__bar a{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- placeholder flagging ---------- */
/* deliberately sets no `position` — the highlight is background + box-shadow only,
   and a `position:relative` here would override .fig__tag's absolute placement */
body.flagged .fill{background:rgba(180,85,42,.15);box-shadow:0 0 0 1px rgba(180,85,42,.5);border-radius:2px}
body.flagged .on-dark .fill,body.flagged .foot .fill{background:rgba(232,140,96,.22);box-shadow:0 0 0 1px rgba(232,140,96,.55)}
body.flagged .fig__frame,body.flagged .pcard__img,body.flagged .phero__img,body.flagged .band__bg,body.flagged .offer__img{outline:3px solid rgba(180,85,42,.75);outline-offset:-3px}
.flagbtn{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  background:transparent;border:1px solid rgba(169,181,175,.5);color:var(--on-dark-2);
  padding:11px 15px;cursor:pointer;border-radius:2px;
}
.flagbtn:hover{border-color:#fff;color:#fff}
.flagbtn[aria-pressed="true"]{background:var(--flag);border-color:var(--flag);color:#fff}

/* ===== WordPress / Elementor integration =====================
   Elementor injects its own container padding and widget margins;
   this design does its own spacing, so neutralise them and let the
   .band / .wrap system own the layout. */
.elementor-widget:not(:last-child){margin-block-end:0}
.elementor-element{--widgets-spacing:0px 0px}
.e-con,.e-con-inner{padding:0;--padding-inline-start:0;--padding-inline-end:0;
  --padding-block-start:0;--padding-block-end:0;max-width:none}
.elementor-section-boxed>.elementor-container{max-width:none}
.elementor-widget-container{margin:0}
body.elementor-page .site-header,body.elementor-page .site-footer{display:none}
.hello-elementor .site-header{display:none}
/* the admin bar must not hide the sticky masthead for logged-in editors */
body.admin-bar .masthead{top:32px}
@media (max-width:782px){body.admin-bar .masthead{top:46px}}
/* Elementor image widgets inherit the figure treatment */
.fig__frame .elementor-widget-image,.fig__frame .elementor-widget-image img{display:block;height:100%}

/* ===== scroll reveal ==========================================
   Opt-in: the body class is added by JS, so if the script fails
   or is blocked the content is simply visible rather than blank. */
body.js-rv .rv{opacity:0;transform:translateY(16px)}
body.js-rv .rv.is-in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  body.js-rv .rv{opacity:1;transform:none}
}

/* ===== Elementor structure bridge =============================
   Elementor wraps columns in .elementor-container and widgets in
   .elementor-widget-wrap, so the design's grid rules have to target
   those instead of assuming direct children. */

/* a .band's inner column carries the measure */
.elementor-section.band > .elementor-container{max-width:none;display:block}
.elementor-column.wrap{max-width:var(--shell);width:100%;margin-inline:auto;
  padding-inline:var(--gut)}
.elementor-column.wrap > .elementor-widget-wrap{display:flex;flex-direction:column;
  gap:clamp(20px,2.4vw,34px);align-content:flex-start;padding:0}

/* splits become the 7/5, 5/7 and 1/1 grids */
.elementor-section.split > .elementor-container{display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(30px,4.5vw,68px);align-items:start;max-width:none}
.elementor-section.split--rev > .elementor-container{
  grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.elementor-section.split--even > .elementor-container{
  grid-template-columns:repeat(2,minmax(0,1fr))}
.elementor-section.split > .elementor-container > .elementor-column{width:100%}
.elementor-section.split > .elementor-container > .elementor-column > .elementor-widget-wrap{
  display:flex;flex-direction:column;gap:clamp(20px,2.4vw,34px);align-content:flex-start;padding:0}
@media (max-width:900px){
  .elementor-section.split > .elementor-container,
  .elementor-section.split--rev > .elementor-container,
  .elementor-section.split--even > .elementor-container{grid-template-columns:1fr}
}

/* full-bleed hero section carries no measure of its own */
.elementor-section.nx-hero > .elementor-container{max-width:none;display:block}
.elementor-section.nx-hero .elementor-column,
.elementor-section.nx-hero .elementor-widget-wrap,
.elementor-section.nx-hero .elementor-widget-container{padding:0;margin:0}

/* the stats strip that rides up over the hero */
.elementor-section.nx-statlift > .elementor-container{max-width:none;display:block}
.elementor-column.statlift{max-width:var(--shell);width:100%;margin-inline:auto;
  padding-inline:var(--gut);position:relative;z-index:20;
  margin-top:clamp(-56px,-4vw,-30px)}
.elementor-column.statlift .inner{background:var(--sheet);border:1px solid var(--rule);
  padding:clamp(18px,2.2vw,30px) clamp(20px,2.6vw,34px)}

/* small utilities used by the generated markup */
.nx-note{margin-top:4px;color:var(--ink-3)}
.on-dark .nx-note{color:var(--on-dark-2)}
.nx-cta{align-items:center}
.nx-embed{max-width:680px;background:rgba(247,248,246,.06);
  border-color:rgba(169,181,175,.42);align-items:flex-start;gap:10px}
.nx-embed .card__k{color:var(--accent-lift)}
.nx-embed p{color:var(--on-dark-2)}

/* photo bands: the background image widget must not take part in the flow */
.band--photo .elementor-widget-html:has(.band__bg){position:static}
.band--photo .band__bg,.band--photo .band__scrim{pointer-events:none}

/* ===== Elementor bridge fixes =================================
   1. Flex items inside a column shrink to content, so inner
      sections must be told to occupy the full measure.
   2. On photo bands the scrim sits at z-index 1; content widgets
      are z-index:auto and would paint underneath it. */

.elementor-column.wrap > .elementor-widget-wrap > .elementor-element,
.elementor-section.split > .elementor-container > .elementor-column
  > .elementor-widget-wrap > .elementor-element{width:100%;max-width:100%}

.elementor-section.split > .elementor-container{width:100%}

.elementor-section.band--photo{position:relative;isolation:isolate}
/* Elementor columns are position:relative, so a band background with inset:0 would
   resolve against the padded column instead of the section and stop short of the
   edges. Make the intermediate wrappers static so the section is the containing block. */
.elementor-section.band--photo > .elementor-container,
.elementor-section.band--photo > .elementor-container > .elementor-column,
.elementor-section.band--photo .elementor-widget-wrap{position:static}
/* the first widget only carries the background image + scrim */
.band--photo .elementor-widget-wrap > .elementor-element:first-child,
.band--photo .elementor-widget-wrap > .elementor-element:first-child
  > .elementor-widget-container{position:static}
/* everything after it is content and must sit above the scrim */
.band--photo .elementor-widget-wrap > .elementor-element:not(:first-child){
  position:relative;z-index:2}
/* the CTA band bundles background and content in one widget */
.nx-cta{position:relative;z-index:2}

/* The base .split rule is written for the mockup's plain markup, where .split is
   itself the grid. In Elementor the columns live one level deeper inside
   .elementor-container, so the section must NOT also be a grid or the content
   lands in the first track of a nested grid (7fr of 7fr). */
.elementor-section.split,
.elementor-section.split--rev,
.elementor-section.split--even{display:block}