.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.skip-link:focus{left:8px;top:8px;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;}



/* ============================================================
   TOKENS — shared with the GeN3 company site (index.html)
   ============================================================ */
:root{
  --paper:#EDE8DB;
  --ink:#16150F;
  --accent:#3C7A6B;
  --muted:#B4AC9B;

  --mint:#8FBAAD;
  --line:rgba(22,21,15,.22);
  --hair:rgba(22,21,15,.14);
  --edge:clamp(20px,5vw,80px);
  --h-font:"Helvetica Neue",Helvetica,"Arial Nova",Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--h-font);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0;font-weight:inherit;}
a{color:inherit;text-decoration:none;}

.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.display{font-weight:800;line-height:.9;letter-spacing:-.035em;}
.label{font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;}
.label.thin{font-weight:400;opacity:.6;}
.built-by{border-bottom:1px solid currentColor;padding-bottom:1px;opacity:.85;transition:color .25s ease,border-color .25s ease,opacity .25s ease;}
.built-by:hover{color:var(--mint);border-color:var(--mint);opacity:1;}


.nav{
  position:fixed;top:0;left:0;right:0;z-index:9997;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--edge);mix-blend-mode:difference;color:#fff;
}
.nav .brand{font-weight:800;letter-spacing:-.02em;font-size:15px;}
.nav .links{display:flex;gap:26px;}
.nav .links a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;}
.nav .links a.on{opacity:1;border-bottom:1px solid currentColor;padding-bottom:3px;}
.nav .links a:not(.on){opacity:.6;position:relative;padding-bottom:3px;transition:opacity .25s;}
.nav .links a:not(.on)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s cubic-bezier(.16,1,.3,1);}
.nav .links a:not(.on):hover{opacity:1;}
.nav .links a:not(.on):hover::after{right:0;}
@media(max-width:640px){.nav .links{display:none;}}

.band{position:relative;padding:clamp(60px,12vh,140px) var(--edge);}
.wrap{width:min(1160px,92vw);margin:0 auto;}

/* ---------- dossier framing (shared with the landing page) ---------- */
.corner-labels{position:absolute;inset:0;z-index:5;pointer-events:none;}
.cl{position:absolute;pointer-events:auto;}
.cl-tl{left:var(--edge);top:60px;}
.cl-tr{right:var(--edge);top:60px;text-align:right;}
.cl-bl{left:var(--edge);bottom:26px;}
.cl-br{right:var(--edge);bottom:26px;text-align:right;}

/* mobile — the left/right dossier corner labels collide on narrow screens.
   Keep the left-hand pair (the identifying ones) and drop the right-hand ornamentation. */
@media(max-width:760px){
  .cl-tr,.cl-br{display:none;}
  .cl{max-width:74vw;}
}

.reg{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.45;z-index:5;}
.reg::before,.reg::after{content:"";position:absolute;background:var(--ink);}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px);}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px);}
.reg.on-dark::before,.reg.on-dark::after{background:var(--paper);}
.gline{position:absolute;background:var(--line);z-index:5;}
.gline.h{left:0;height:1px;width:100%;transform-origin:left center;transform:scaleX(0);}
.gline.v{top:0;width:1px;height:100%;transform-origin:top center;transform:scaleY(0);}
.gline.on-dark{background:rgba(237,232,219,.2);}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:40px;flex-wrap:wrap;gap:12px;}
.sec-head h2{font-size:clamp(22px,3vw,40px);font-weight:800;letter-spacing:-.02em;}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;border:1px solid var(--paper);}
.btn.on-paper{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn.on-paper.solid{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn.on-paper.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.btn.on-paper.ghost:hover{background:var(--ink);color:var(--paper);}
.btn[disabled],.btn.disabled{opacity:.4;pointer-events:none;}

/* ---------- geometric marks (reused construction vocabulary) ---------- */
.mk{width:26px;height:26px;position:relative;flex:0 0 auto;}
.mk-node::after{content:"";position:absolute;inset:5px;border-radius:50%;background:currentColor;}
.mk-ring{border:1.5px solid currentColor;border-radius:50%;}
.mk-ring::after{content:"";position:absolute;inset:7px;border:1.5px solid currentColor;border-radius:50%;}
.mk-slash::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 44%,currentColor 44% 56%,transparent 56%);}
.mk-cross::before,.mk-cross::after{content:"";position:absolute;background:currentColor;}
.mk-cross::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-.75px);}
.mk-cross::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-.75px);}
.mk-bars::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 8px);}
.mk-half{border:1.5px solid currentColor;border-radius:50%;overflow:hidden;}
.mk-half::after{content:"";position:absolute;left:0;top:0;width:50%;height:100%;background:currentColor;}

/* ============================================================
   MOTION HERO — layered paper-cutout scene (horizon/skyline/palms),
   reused as the hero on every page except the landing page's own cover.
   ============================================================ */
.mb-scene{position:relative;height:100vh;overflow:hidden;background:linear-gradient(180deg,#2E6B5D 0%,var(--accent) 55%,#4a8b7a 100%);}
.mb-scene.flipped .mb-bg{transform:scaleX(-1);}
.mb-bg{position:absolute;inset:0;}
.mb-layer{position:absolute;will-change:transform;}
.mb-layer img{display:block;width:100%;height:auto;}
.mb-horizon,.mb-skyline{left:50%;top:50%;width:120%;}
.mb-skyline{filter:drop-shadow(0 3px 10px rgba(0,0,0,.4));}
.mb-palms{left:50%;top:-6%;width:150%;height:106%;}
.mb-palms img{height:100%;object-fit:cover;}

/* mobile — a 16:9 layer scaled by width can't cover a tall, narrow viewport, so the
   scene used to sit as a band with flat gradient above and below. Switch the pair to
   object-fit:cover at full-bleed height. Both layers come from the same 1672x941 canvas
   and get identical box + object-fit values, so they crop identically and the skyline
   stays locked to the waterline. */
@media(max-aspect-ratio:3/2){
  .mb-horizon,.mb-skyline{width:132%;height:132%;}
  .mb-horizon img,.mb-skyline img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;}
  .mb-palms{width:210%;height:124%;top:-12%;}
}

.mb-grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* contrast scrim — guarantees text legibility over arbitrary photo content.
   The photo has both very light (sand, sky) and very dark (buildings) regions, so
   text-shadow alone is not enough: paper-coloured type disappears over the light sand.
   This lays a directional wash under the copy, heaviest where the text actually sits. */
.mb-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(22,21,15,.82) 0%,rgba(22,21,15,.62) 26%,rgba(22,21,15,.28) 52%,rgba(22,21,15,0) 78%),
    linear-gradient(180deg,rgba(22,21,15,.42) 0%,rgba(22,21,15,0) 22%,rgba(22,21,15,0) 58%,rgba(22,21,15,.46) 100%);}
.mb-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(22,21,15,.4) 100%);}

/* ============================================================
   MASTHEAD — sits on top of the motion hero
   ============================================================ */
.ed-mast-frame{position:relative;padding-bottom:56px;display:flex;align-items:center;z-index:6;}
.ed-mast-frame .corner-labels .label{color:var(--paper);}
.ed-mast-frame .ed-kicker .label{color:var(--paper);}
.ed-mast-frame h1,.ed-mast-frame .dek{color:var(--paper);}
.ed-mast-frame h1{text-shadow:0 2px 6px rgba(0,0,0,.55),0 10px 44px rgba(0,0,0,.5);}
.ed-mast-frame .dek{opacity:.94;text-shadow:0 1px 3px rgba(0,0,0,.75),0 2px 18px rgba(0,0,0,.6);}
.ed-mast-frame .ed-pill{border-color:var(--paper);color:var(--paper);}
.ed-mast-frame .ed-pill::before{background:var(--paper);}
.ed-mast-frame .ed-pill:hover{color:var(--ink);}
.ed-mast-frame .wrap{position:relative;z-index:6;}
.ed-mast{padding-top:clamp(120px,20vh,190px);}
.ed-kicker{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.ed-kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);}
.ed-mast h1{font-size:clamp(46px,9vw,120px);max-width:14ch;}
.ed-mast .dek{font-size:clamp(15px,1.7vw,20px);line-height:1.55;opacity:.75;max-width:60ch;margin-top:26px;}

.ed-rail{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;border-top:1px solid var(--line);padding-top:26px;}
.ed-pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--ink);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .3s ease,transform .15s ease;
}
.ed-pill::before{
  content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:translateY(101%);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.ed-pill:hover{color:var(--paper);}
.ed-pill:hover::before{transform:translateY(0);}
.ed-pill:active{transform:scale(.95);}
.ed-pill .sw{width:8px;height:8px;border-radius:50%;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.ed-pill:hover .sw{transform:scale(1.35);}


/* ============================================================
   DIRECTORY — neighborhood x category listing grid
   ============================================================ */
.dir-intro{max-width:70ch;}
.dir-intro h2{font-size:clamp(24px,3.4vw,44px);font-weight:800;letter-spacing:-.025em;margin-bottom:18px;}
.dir-intro p{font-size:clamp(14px,1.5vw,17px);line-height:1.65;opacity:.78;margin-bottom:14px;}

.dir-filters{display:flex;flex-direction:column;gap:18px;margin:48px 0 34px;}
.dir-filter-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.dir-filter-row > .label{flex:0 0 auto;min-width:104px;opacity:.5;}
.dir-chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:9px 15px;
  border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.chip:hover{border-color:var(--ink);}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

.dir-count{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:18px;}

.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:0;border-top:1.5px solid var(--ink);border-left:1px solid var(--line);}
.dir-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px 30px;position:relative;min-height:170px;display:flex;flex-direction:column;gap:9px;}
.dir-card .dir-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;}
.dir-card .dir-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.dir-card h3{font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.2;}
.dir-card p{font-size:13px;line-height:1.6;opacity:.72;}
.dir-card .dir-link{margin-top:auto;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;}

.dir-empty{grid-column:1/-1;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:64px 30px;text-align:center;}
.dir-empty .k{font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.45;margin-bottom:14px;}
.dir-empty h3{font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px;}
.dir-empty p{font-size:14px;line-height:1.65;opacity:.7;max-width:46ch;margin:0 auto 22px;}

/* ---------- apply / onboarding form ---------- */
.dir-apply{background:var(--ink);color:var(--paper);}
.dir-apply .sec-head{border-bottom-color:var(--paper);}
.dir-apply .sec-head h2{color:var(--paper);}
.dir-apply .sec-head .label{color:var(--paper);opacity:.55;}
.apply-lede{max-width:60ch;font-size:clamp(14px,1.5vw,17px);line-height:1.65;opacity:.8;margin-bottom:40px;}
.apply-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border-top:1px solid rgba(237,232,219,.25);border-left:1px solid rgba(237,232,219,.18);margin-bottom:52px;}
.apply-perks .cell{border-right:1px solid rgba(237,232,219,.18);border-bottom:1px solid rgba(237,232,219,.18);padding:22px 20px;}
.apply-perks .cell .n{font-size:10px;letter-spacing:.24em;opacity:.45;display:block;margin-bottom:9px;}
.apply-perks .cell h4{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px;}
.apply-perks .cell p{font-size:12.5px;line-height:1.6;opacity:.65;}

.apply-form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px;}
.apply-form .full{grid-column:1/-1;}
.apply-form label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:8px;}
.apply-form input,.apply-form select,.apply-form textarea{
  width:100%;background:transparent;border:1px solid rgba(237,232,219,.35);color:var(--paper);
  padding:12px 14px;font-size:14px;font-family:inherit;border-radius:0;}
.apply-form input:focus,.apply-form select:focus,.apply-form textarea:focus{outline:none;border-color:var(--mint);}
.apply-form select option{background:var(--ink);color:var(--paper);}
.apply-form textarea{resize:vertical;min-height:96px;}
.apply-form .btn{margin-top:6px;cursor:pointer;background:var(--paper);color:var(--ink);border-color:var(--paper);font-family:inherit;}
.apply-form .btn:hover{background:var(--mint);border-color:var(--mint);}
.apply-note{font-size:11.5px;opacity:.5;line-height:1.6;margin-top:14px;}
@media(max-width:640px){.apply-form{grid-template-columns:1fr;}}

/* ============================================================
   FOOTER (static — matches index.html footer content)
   ============================================================ */
.footer-band{background:var(--ink);color:var(--paper);}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;}
.ft-top h2{font-size:clamp(34px,8vw,110px);}
.ft-mail{font-size:clamp(16px,2vw,26px);font-weight:700;letter-spacing:-.01em;border-bottom:2px solid var(--paper);padding-bottom:2px;}
.ft-bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;border-top:1px solid rgba(237,232,219,.2);padding-top:20px;margin-top:60px;}
.ft-social{display:flex;gap:20px;flex-wrap:wrap;}
.ft-social a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;}
.ft-social a:hover{opacity:1;color:var(--mint);}

.rise{opacity:1;}

/* ---------- scroll progress rail ---------- */
.scroll-rail{position:fixed;top:16vh;bottom:16vh;right:14px;width:16px;z-index:9996;pointer-events:none;mix-blend-mode:difference;}
.scroll-rail .track{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;opacity:.25;transform:translateX(-.5px);}
.scroll-rail .fill{position:absolute;top:0;left:50%;width:1px;height:100%;background:#fff;transform:translateX(-.5px) scaleY(0);transform-origin:top center;}
.scroll-rail .pct{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:9.5px;letter-spacing:.16em;color:#fff;white-space:nowrap;font-weight:600;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
@media(max-width:760px){.scroll-rail{display:none;}}

/* ============================================================
   VIEWPORT GUARDS — appended last so these win over the base rules above.
   (An earlier attempt sat near the top of the sheet and was silently
   overridden by the original .ed-mast / .ed-mast-frame declarations.)

   1. html needs overflow-x:hidden too; body alone still let the page drag
      sideways because the document element was the thing scrolling.
   2. The dossier corner labels are pinned to the hero's corners while the
      masthead copy is flex-centred. On short viewports (laptops at 768px
      tall, phones in landscape) the copy grew into the label band. Scale the
      display type to viewport HEIGHT as well as width, drop the big inner
      padding, and once there is genuinely no room, retire the decorative
      labels rather than let them collide.
   ============================================================ */
html{overflow-x:hidden;}

/* Applied unconditionally, NOT behind a max-height query: a 768px-tall laptop is
   the exact case that broke, and it sits just outside any sensible threshold.
   Sizing the display type against viewport height as well as width is what
   actually fixes it, at every size. */
.ed-mast-frame{padding-top:max(112px,11vh);padding-bottom:56px;}
.ed-mast{padding-top:0;}
.ed-mast h1{font-size:clamp(30px,min(9vw,13vh),120px);}
.ed-mast .dek{font-size:clamp(13px,1.6vw,20px);margin-top:clamp(14px,2.4vh,26px);}
.cover-headline h1{font-size:clamp(44px,min(17vw,19vh),240px);}

@media(max-height:620px){
  .ed-mast-frame{padding-top:106px;padding-bottom:40px;} /* clears the 2-line corner label (ends ~96px) */
  .ed-mast h1{font-size:clamp(26px,min(7vw,10.5vh),120px);}
  .ed-actions{margin-top:16px;}
}

/* genuinely no room left — retire the decorative framing rather than collide */
/* On the narrowest phones the corner label wraps to a taller block (~126px),
   so the fixed floor above is not enough. */
@media(max-width:400px){
  .ed-mast-frame{padding-top:148px;}
}

@media(max-height:560px){
  .cl-tl,.cl-tr,.cl-bl,.cl-br,.cl{display:none;}
}

.ty-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--edge);background:var(--ink);color:var(--paper);text-align:center;}
.ty-inner{max-width:56ch;}
.ty-inner .label{color:var(--mint);}
.ty-inner h1{font-size:clamp(34px,min(7vw,11vh),84px);font-weight:800;letter-spacing:-.03em;line-height:.95;margin:20px 0 22px;}
.ty-inner p{font-size:clamp(14px,1.6vw,17px);line-height:1.65;opacity:.8;margin-bottom:14px;}
.ty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.ty-actions a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:14px 24px;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--paper);color:var(--paper);transition:background .2s,color .2s,border-color .2s;}
.ty-actions a.primary{background:var(--paper);color:var(--ink);}
.ty-actions a:hover{background:var(--mint);border-color:var(--mint);color:var(--ink);}