/* --- tokens ----------------------------------------------------- */
  :root{
    --bone:#F2F1E9;
    --bronze:#A6652D;
    --tan:#D9BCA3;
    --taupe:#A68C7C;
    --ink:#262626;
    --ink-70:rgba(38,38,38,.7);
    --ink-50:rgba(38,38,38,.5);
    --ink-20:rgba(38,38,38,.2);
    --ink-10:rgba(38,38,38,.1);
    --bone-90:rgba(242,241,233,.9);

    --serif:"Instrument Serif", "Times New Roman", serif;
    --sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;

    --measure: 64ch;
    --gutter: clamp(20px, 4vw, 56px);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bone);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:400;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

  /* --- utility ---------------------------------------------------- */
  .mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-70);display:inline-flex;align-items:center;gap:10px}
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--bronze)}
  .rule{height:1px;background:var(--ink-20);border:none}

  [lang-hide="en"]:lang(en),
  [lang-hide="sv"]:lang(sv){display:none !important}

  /* hide SV/EN by default; JS reveals the active one. High-specificity so
     descendant type selectors (e.g. .nav .brand .wordmark small) don't win. */
  html .lang-sv, html .lang-en{display:none !important}
  html[data-lang="sv"] .lang-sv{display:inline !important}
  html[data-lang="en"] .lang-en{display:inline !important}
  html[data-lang="sv"] .block.lang-sv,
  html[data-lang="en"] .block.lang-en{display:block !important}

  /* --- top nav ---------------------------------------------------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:24px;
    padding:18px var(--gutter);
    color:var(--bone);
    background:rgba(20,20,20,.35);backdrop-filter:blur(6px);
    transition:color .3s, background-color .3s, border-color .3s;
    border-bottom:1px solid transparent;
  }
  .nav.on-light{color:var(--ink);background:rgba(242,241,233,.94);backdrop-filter:blur(8px);border-bottom-color:var(--ink-10)}
  .nav.on-dark{color:var(--bone);background:rgba(20,20,20,.78);backdrop-filter:blur(8px);border-bottom-color:rgba(242,241,233,.1)}
  .nav .brand{display:flex;align-items:center;gap:14px;min-width:0}
  .nav .brand .mark{
    width:26px;height:26px;position:relative;
    display:inline-block;flex:none;
  }
  .nav .brand .mark::before,
  .nav .brand .mark::after{
    content:"";position:absolute;border:1px solid currentColor;
  }
  .nav .brand .mark::before{left:0;top:0;width:60%;height:100%}
  .nav .brand .mark::after{right:0;top:22%;width:50%;height:78%}
  .nav .brand .wordmark{
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    line-height:1.2;min-width:0;
  }
  .nav .brand .wordmark small{display:block;opacity:.7;font-size:10px;letter-spacing:.18em;margin-top:2px}

  .nav ul{list-style:none;display:flex;gap:clamp(16px,3vw,36px);justify-self:center}
  .nav ul a{
    font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    padding:6px 0;position:relative;
  }
  .nav ul a:hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}

  .lang-toggle{
    justify-self:end;display:flex;align-items:center;gap:0;
    border:1px solid currentColor;border-radius:999px;padding:4px;font-family:var(--mono);font-size:10px;letter-spacing:.2em
  }
  .lang-toggle button{
    padding:6px 12px;border-radius:999px;color:inherit;opacity:.55;transition:all .2s;
  }
  .lang-toggle button.active{background:currentColor;color:var(--ink);opacity:1}
  .nav.on-light .lang-toggle button.active{color:var(--bone)}

  .nav-burger{
    display:none;width:40px;height:40px;border:1px solid currentColor;border-radius:999px;
    align-items:center;justify-content:center;cursor:pointer;flex:none;
    background:transparent;color:inherit;padding:0;
  }
  .nav-burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative;transition:transform .25s}
  .nav-burger span::before,.nav-burger span::after{
    content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;transition:transform .25s, top .25s;
  }
  .nav-burger span::before{top:-5px}
  .nav-burger span::after{top:5px}
  .nav-burger.open span{transform:rotate(45deg)}
  .nav-burger.open span::before{top:0;transform:rotate(-90deg)}
  .nav-burger.open span::after{top:0;opacity:0}

  @media (max-width:820px){
    .nav{grid-template-columns:1fr auto auto;gap:12px;padding:12px var(--gutter)}
    .nav .brand .wordmark small{display:none}
    .nav .brand .wordmark{font-size:10px;letter-spacing:.18em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .nav ul{
      position:fixed;top:64px;left:0;right:0;
      flex-direction:column;gap:0;justify-self:stretch;
      background:rgba(20,20,20,.96);backdrop-filter:blur(12px);
      color:var(--bone);
      padding:8px var(--gutter) 24px;
      border-bottom:1px solid rgba(242,241,233,.15);
      transform:translateY(-12px);opacity:0;pointer-events:none;
      transition:transform .25s ease, opacity .25s ease;
    }
    .nav ul.open{transform:none;opacity:1;pointer-events:auto}
    .nav ul li{border-bottom:1px solid rgba(242,241,233,.12)}
    .nav ul li:last-child{border-bottom:0}
    .nav ul a{display:block;padding:18px 0;font-size:12px;color:var(--bone)}
    .lang-toggle{font-size:9px}
    .lang-toggle button{padding:5px 10px}
    .nav-burger{display:inline-flex}
    .nav .brand .mark{width:22px;height:22px}
  }
  @media (max-width:380px){
    .nav .brand .wordmark{font-size:9px}
  }

  /* --- hero ------------------------------------------------------- */
  .hero{
    position:relative;height:100vh;min-height:600px;width:100%;
    color:var(--bone);overflow:hidden;
  }
  @media (max-width:820px){
    .hero{min-height:560px;height:auto;min-height:100svh}
  }
  .hero .bg{
    position:absolute;inset:0;
    background:url('assets/photos/hero-tower-cityscape.jpg') center/cover no-repeat;
    filter:saturate(.85);
  }
  .hero .scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(20,20,20,.72) 0%, rgba(20,20,20,.45) 30%, rgba(20,20,20,.35) 55%, rgba(20,20,20,.82) 100%),
      linear-gradient(90deg, rgba(20,20,20,.45) 0%, rgba(20,20,20,0) 55%);
  }
  .hero .content{
    position:relative;z-index:2;height:100%;
    display:grid;grid-template-rows:1fr auto;
    padding:140px var(--gutter) 48px;
  }
  @media (max-width:820px){
    .hero .content{padding:110px var(--gutter) 80px;gap:36px}
  }
  .hero .headline{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(48px, 9vw, 148px);
    line-height:.92;letter-spacing:-.01em;
    max-width:16ch;
    align-self:center;
    color:#fff;
    text-shadow:0 2px 40px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  }
  .hero .headline em{font-style:italic;color:var(--tan)}
  .hero .sub{
    margin-top:28px;max-width:46ch;font-size:clamp(15px,1.3vw,19px);
    font-weight:400;line-height:1.55;color:#fff;
    text-shadow:0 1px 20px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  }
  @media (max-width:820px){
    .hero .headline{font-size:clamp(44px,11vw,68px);max-width:14ch}
    .hero .sub{font-size:15px;margin-top:20px}
  }
  .hero .metabar{
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
    border-top:1px solid rgba(242,241,233,.3);padding-top:22px;
    font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
    color:rgba(242,241,233,.85);
  }
  .hero .metabar .k{display:block;opacity:.55;margin-bottom:4px;font-size:10px}
  .hero .metabar .v{font-size:18px;font-family:var(--serif);letter-spacing:0;text-transform:none;color:var(--bone);font-weight:400;line-height:1}
  .hero .metabar .v small{font-family:var(--mono);font-size:10px;letter-spacing:.15em;opacity:.6;margin-left:4px;text-transform:uppercase}
  .hero .credit{
    position:absolute;right:var(--gutter);bottom:20px;z-index:2;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(242,241,233,.6);writing-mode:vertical-rl;transform:rotate(180deg);
  }
  @media (max-width:700px){
    .hero .metabar{grid-template-columns:repeat(2,1fr);gap:18px;padding-top:18px}
    .hero .metabar .v{font-size:16px}
    .hero .credit{writing-mode:horizontal-tb;transform:none;right:auto;left:var(--gutter);bottom:8px;font-size:9px}
  }

  /* --- marquee fact strip ---------------------------------------- */
  .factstrip{
    background:var(--ink);color:var(--bone);
    padding:18px 0;overflow:hidden;
    border-top:1px solid var(--ink-10);
  }
  @media (max-width:600px){.factstrip{padding:14px 0}.factstrip .track{font-size:10px;gap:40px}}
  .factstrip .track{
    display:flex;gap:60px;white-space:nowrap;
    animation:marquee 60s linear infinite;
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  }
  .factstrip .track span{opacity:.7}
  .factstrip .track em{color:var(--bronze);font-style:normal;font-weight:500;margin-right:12px;opacity:1}
  @keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }

  /* --- intro editorial ------------------------------------------- */
  .intro{padding:120px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,120px);align-items:start}
  @media (max-width:820px){.intro{grid-template-columns:1fr;padding:80px var(--gutter);gap:36px}}
  .intro .left .eyebrow{margin-bottom:32px}
  .intro h2{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(40px,4.5vw,68px);line-height:1;letter-spacing:-.01em;
    max-width:14ch;
  }
  .intro h2 em{font-style:italic;color:var(--bronze)}
  .intro .right p{font-size:17px;line-height:1.7;color:var(--ink);max-width:52ch;margin-bottom:20px}
  .intro .right p strong{color:var(--ink);font-weight:600}

  .quote{
    margin:0 var(--gutter) 120px;padding:48px 0;
    border-top:1px solid var(--ink-20);border-bottom:1px solid var(--ink-20);
    display:grid;grid-template-columns:160px 1fr 160px;gap:40px;align-items:start;
  }
  @media (max-width:820px){.quote{margin:0 var(--gutter) 80px;padding:36px 0;gap:20px}}
  .quote .attr{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-50);line-height:1.7}
  .quote blockquote{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(28px,3.2vw,48px);line-height:1.15;letter-spacing:-.005em;
    font-style:italic;
  }
  .quote blockquote::before{content:"“";color:var(--bronze);margin-right:.1em}
  .quote blockquote::after{content:"”";color:var(--bronze);margin-left:.05em}
  @media (max-width:820px){.quote{grid-template-columns:1fr}.quote .attr[style*="text-align:right"]{text-align:left !important}}

  /* --- facts grid ------------------------------------------------ */
  .facts{padding:0 var(--gutter) 120px}
  .facts header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:48px;gap:40px;flex-wrap:wrap}
  .facts header h3{font-family:var(--serif);font-size:clamp(32px,3.4vw,48px);font-weight:400;letter-spacing:-.005em}
  .facts .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-20)}
  .facts .cell{background:var(--bone);padding:32px 28px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
  @media (max-width:600px){.facts .cell{padding:24px 20px;min-height:140px}}
  .facts .cell .n{font-family:var(--serif);font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.02em}
  .facts .cell .n small{font-family:var(--mono);font-size:13px;letter-spacing:.1em;margin-left:4px;vertical-align:.8em}
  .facts .cell .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-70)}
  @media (max-width:900px){.facts .grid{grid-template-columns:repeat(2,1fr)}}

  /* --- image panel ----------------------------------------------- */
  .imagepanel{
    padding:0 var(--gutter) 140px;
    display:grid;grid-template-columns:5fr 4fr;gap:24px;
  }
  @media (max-width:820px){.imagepanel{padding:0 var(--gutter) 80px;gap:14px}}
  .imagepanel figure{margin:0;position:relative}
  .imagepanel figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
  .imagepanel figure.tall img{aspect-ratio:3/4}
  .imagepanel figure figcaption{
    position:absolute;left:16px;bottom:14px;color:var(--bone);
    font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.8
  }
  .imagepanel .right-col{display:grid;grid-template-rows:1fr 1fr;gap:24px}
  @media (max-width:820px){.imagepanel{grid-template-columns:1fr}}

  /* --- section shared ------------------------------------------- */
  section.block{padding:140px var(--gutter);border-top:1px solid var(--ink-20)}
  section.block .head{display:grid;grid-template-columns:1fr 2fr;gap:clamp(20px,4vw,80px);margin-bottom:72px;align-items:end}
  @media (max-width:820px){
    section.block{padding:80px var(--gutter)}
    section.block .head{grid-template-columns:1fr;gap:18px;margin-bottom:48px;align-items:start}
  }
  section.block .head .label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-70)}
  section.block .head h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,80px);line-height:.95;letter-spacing:-.01em}
  section.block .head h2 em{font-style:italic;color:var(--bronze)}

  /* --- board / contact ------------------------------------------ */
  #board{background:var(--bone)}
  .contactwrap{display:grid;grid-template-columns:1fr;grid-template-areas:"form" "side" "list";align-items:start;max-width:780px}
  .contactwrap > form.compose{grid-area:form;margin-bottom:48px}
  .contactwrap > .side{grid-area:side}
  .contactwrap > .boardlist{grid-area:list}
  .contactwrap .side .eyebrow{margin-bottom:20px}
  .contactwrap .side h3{font-family:var(--serif);font-size:32px;font-weight:400;margin-bottom:18px}
  .contactwrap .side p{color:var(--ink-70);max-width:38ch;margin-bottom:28px;font-size:15px;line-height:1.65}
  .boardlist{border-top:1px solid var(--ink-20);margin-bottom:40px}
  .boardlist .row{display:grid;grid-template-columns:26px 1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--ink-20);align-items:center;font-size:15px}
  @media (max-width:600px){.boardlist .row{font-size:14px;grid-template-columns:22px 1fr;padding:14px 0}}
  .boardlist .row .n{font-family:var(--mono);font-size:11px;color:var(--ink-50);letter-spacing:.1em}
  .boardlist .row .name{font-weight:500}
  .boardlist .row .role{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);display:block;margin-top:2px}
  .boardlist .row .mail{font-family:var(--mono);font-size:11px;color:var(--bronze);letter-spacing:.05em}

  form.compose{
    background:#fff;border:1px solid var(--ink-20);padding:clamp(24px,3vw,40px);
    display:grid;gap:18px;
  }
  form.compose .field{display:grid;gap:6px}
  form.compose label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-70)}
  form.compose input,form.compose select,form.compose textarea{
    font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--ink-20);
    background:var(--bone);color:var(--ink);border-radius:0;
    transition:border-color .2s;
  }
  form.compose textarea{min-height:140px;resize:vertical;font-family:var(--sans)}
  form.compose input:focus,form.compose select:focus,form.compose textarea:focus{outline:none;border-color:var(--bronze)}
  form.compose .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:700px){form.compose .row2{grid-template-columns:1fr}}
  form.compose .actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:16px;flex-wrap:wrap}
  @media (max-width:600px){form.compose .actions{flex-direction:column;align-items:stretch}form.compose .actions .btn{justify-content:center}}
  form.compose .note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}

  .btn{
    display:inline-flex;align-items:center;gap:12px;padding:14px 22px;
    background:var(--ink);color:var(--bone);border:1px solid var(--ink);
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    transition:all .2s;cursor:pointer;
  }
  .btn:hover{background:var(--bronze);border-color:var(--bronze)}
  .btn:disabled{opacity:.35;cursor:not-allowed;background:var(--ink);border-color:var(--ink)}
  .btn .arrow{font-family:var(--serif);font-size:16px;letter-spacing:0}
  .btn.ghost{background:transparent;color:var(--ink)}
  .btn.ghost:hover{background:var(--ink);color:var(--bone)}

  @media (max-width:820px){.contactwrap > form.compose{margin-bottom:40px}}

  /* --- broker section ------------------------------------------- */
  #brokers{background:var(--ink);color:var(--bone);border-top:0}
  #brokers .head h2 em{color:var(--tan)}
  #brokers .head .label{color:rgba(242,241,233,.6)}
  #brokers .rule{background:rgba(242,241,233,.2)}
  .brokergrid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(30px,5vw,80px)}
  .brokerfacts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(242,241,233,.2);border:1px solid rgba(242,241,233,.2)}
  .brokerfacts .f{background:var(--ink);padding:24px 22px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
  @media (max-width:600px){.brokerfacts .f{padding:20px;min-height:110px}}
  .brokerfacts .f .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,241,233,.55)}
  .brokerfacts .f .v{font-family:var(--serif);font-size:26px;line-height:1.1}
  .brokerfacts .f .v small{font-family:var(--mono);font-size:11px;color:rgba(242,241,233,.55);letter-spacing:.1em;display:block;margin-top:6px}

  .downloads{display:grid;gap:12px;margin-top:32px}
  .doc{
    display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;
    padding:18px 22px;border:1px solid rgba(242,241,233,.2);
    transition:background .2s,border-color .2s;cursor:pointer;color:var(--bone);
  }
  @media (max-width:600px){.doc{padding:16px;gap:12px}.doc .title{font-size:14px}}
  .doc:hover{background:rgba(242,241,233,.05);border-color:var(--bronze)}
  .doc .ic{
    width:44px;height:44px;border:1px solid rgba(242,241,233,.3);
    display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--tan)
  }
  .doc .title{font-size:15px;font-weight:500;line-height:1.3}
  .doc .meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,241,233,.6);margin-top:4px;display:block}
  .doc .go{font-family:var(--serif);font-size:22px;color:var(--tan)}

  .brokercopy p{color:rgba(242,241,233,.75);font-size:16px;line-height:1.65;margin-bottom:18px;max-width:40ch}
  .brokercopy .contactcard{
    margin-top:40px;padding:28px;border:1px solid rgba(242,241,233,.2);
  }
  .brokercopy .contactcard h4{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:6px}
  .brokercopy .contactcard .mono{color:rgba(242,241,233,.55);margin-bottom:20px;display:block}
  .brokercopy .contactcard .mono + dl{display:grid;gap:10px;font-size:14px}
  .brokercopy dl{display:grid;gap:10px}
  .brokercopy dt{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(242,241,233,.55);margin-bottom:2px}
  .brokercopy dd{font-size:15px;color:var(--bone);margin-bottom:12px}
  .brokercopy a.link{color:var(--tan);border-bottom:1px solid rgba(217,188,163,.3);padding-bottom:1px}
  .brokercopy a.link:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
  @media (max-width:820px){.brokergrid{grid-template-columns:1fr}.brokerfacts{grid-template-columns:1fr}}

  /* --- residents ------------------------------------------------- */
  #residents{background:var(--bone)}
  .residentwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:stretch}
  @media (max-width:820px){.residentwrap{gap:0}}
  .residentwrap .visual{
    position:relative;background:
      linear-gradient(180deg, rgba(38,38,38,.25), rgba(38,38,38,.55)),
      url('assets/photos/facade-1.avif') center/cover no-repeat;
    min-height:520px;color:var(--bone);padding:40px;
    display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  }
  @media (max-width:820px){.residentwrap .visual{padding:28px;min-height:280px}}
  .residentwrap .visual .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
  .residentwrap .visual blockquote{font-family:var(--serif);font-size:clamp(26px,2.8vw,40px);line-height:1.1;font-style:italic;max-width:18ch}
  .residentwrap .visual footer{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.7}

  .loginpanel{
    background:#fff;border:1px solid var(--ink-20);padding:clamp(32px,4vw,56px);
    display:flex;flex-direction:column;
  }
  .loginpanel .eyebrow{margin-bottom:16px}
  .loginpanel h3{font-family:var(--serif);font-size:clamp(32px,3vw,44px);font-weight:400;line-height:1;margin-bottom:14px}
  .loginpanel p.lead{color:var(--ink-70);font-size:15px;line-height:1.6;margin-bottom:32px;max-width:44ch}
  .loginpanel form{display:grid;gap:18px}
  .loginpanel .field{display:grid;gap:6px}
  .loginpanel label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-70)}
  .loginpanel input{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--ink-20);background:var(--bone);border-radius:0}
  .loginpanel input:focus{outline:none;border-color:var(--bronze)}
  .loginpanel .formrow{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
  .loginpanel .formrow a{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-70)}
  .loginpanel .formrow a:hover{color:var(--bronze)}
  .loginpanel .loginaction{margin-top:8px}
  .loginpanel .loginaction .btn{width:100%}
  .loginpanel .porthint{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);line-height:1.6}
  .loginpanel .loginblock h3{font-size:clamp(26px,2.4vw,36px)}
  .loginsep{height:1px;background:var(--ink-20);margin:44px 0}
  .loginpanel .loginblock .featgrid{margin-top:28px;padding-top:24px}

  .loginpanel .featgrid{margin-top:40px;padding-top:32px;border-top:1px solid var(--ink-20);display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media (max-width:600px){.loginpanel .featgrid{grid-template-columns:repeat(2,1fr);gap:16px}.loginpanel{padding:28px 22px}}
  .loginpanel .featgrid .feat{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-70);line-height:1.7}
  .loginpanel .featgrid .feat::before{content:"";display:block;width:10px;height:10px;border:1px solid var(--bronze);margin-bottom:10px}
  .loginpanel .featgrid .feat .price{display:block;margin-top:7px;color:var(--bronze);font-size:12px;letter-spacing:.04em}
  .loginpanel .pricenote{margin-top:16px}

  .flash{
    display:none;margin-top:18px;padding:14px 16px;background:var(--tan);color:var(--ink);
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:1.5;
    border-left:3px solid var(--bronze);
  }
  .flash.show{display:block}
  .flash.error{background:transparent;color:#c0392b;border-left-color:#c0392b}
  @media (max-width:820px){.residentwrap{grid-template-columns:1fr}.residentwrap .visual{min-height:360px}}

  /* --- footer ---------------------------------------------------- */
  footer.site{
    background:var(--ink);color:var(--bone);
    padding:80px var(--gutter) 36px;
  }
  @media (max-width:820px){footer.site{padding:60px var(--gutter) 28px}}
  @media (max-width:600px){footer.site .word{font-size:36px}footer.site .bottom{flex-direction:column;align-items:flex-start;gap:8px}}
  footer.site .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(242,241,233,.2)}
  footer.site h5{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,241,233,.55);margin-bottom:16px}
  footer.site .word{font-family:var(--serif);font-size:44px;line-height:.95;font-weight:400;margin-bottom:8px}
  footer.site .addr{font-size:14px;color:rgba(242,241,233,.75);line-height:1.7;max-width:30ch}
  footer.site ul{list-style:none}
  footer.site ul li{margin-bottom:8px;font-size:14px}
  footer.site ul a{color:rgba(242,241,233,.75)}
  footer.site ul a:hover{color:var(--tan)}
  footer.site .bottom{display:flex;justify-content:space-between;padding-top:28px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(242,241,233,.55);flex-wrap:wrap;gap:16px}
  @media (max-width:820px){footer.site .top{grid-template-columns:1fr 1fr;gap:32px}}

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease, transform .9s ease}
  .reveal.in{opacity:1;transform:none}