/* THE HOUSE (23 Oct 2026). Phone first, in the family of the phone home page: navy, gold, light capitals,
   one photograph. The numbers sit in a bar fixed at the foot of the screen (his "bottom bar"). */
:root { --deep: #061738; --navy: #0A2560; --gold: #E3CFA3; --cream: #F1E4C6; --soft: rgba(241, 228, 198, .84); --line: rgba(227, 207, 163, .32); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--deep); }
body { min-height: 100vh; background: var(--deep); color: var(--cream); font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
a { color: inherit; text-decoration: none; }

.top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 0; }
.top .logo img { display: block; height: 30px; width: auto; }
.reach { display: flex; align-items: center; gap: 6px; }
.reach a { display: flex; align-items: center; gap: 7px; min-height: 44px; color: var(--gold); font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; }
.reach .tg { width: 40px; justify-content: center; }
.reach .wa span { border-bottom: 1px solid rgba(227, 207, 163, .55); padding-bottom: 2px; }
.reach svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.house { max-width: 620px; margin: 0 auto; }
.photo { position: relative; height: min(62vh, 560px); background: url(/assets/photos/house-phone.jpg) center 40% / cover no-repeat; }
.photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 23, 56, .65) 0%, rgba(6, 23, 56, 0) 22%, rgba(6, 23, 56, 0) 55%, var(--deep) 100%); }
.words { position: relative; padding: 0 22px 34px; margin-top: -40px; }
.eb { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.words p { font-size: 16.5px; line-height: 1.65; color: var(--soft); font-weight: 300; }
.words p + p { margin-top: 16px; }
.words .eb + p { margin-top: 0; }
.words .one { color: var(--cream); font-weight: 400; letter-spacing: .02em; }
.words .end { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); line-height: 2; }
.words .end b { font-weight: 500; color: var(--cream); }

.doors { margin-top: 26px; }
.doors a { display: flex; justify-content: space-between; align-items: center; padding: 17px 0; border-top: 1px solid var(--line);
  font-size: 16px; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.doors a:last-child { border-bottom: 1px solid var(--line); }
.doors i { font-style: normal; color: var(--gold); }

.soc { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.soc a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.soc svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.soc svg .fill { fill: var(--gold); stroke: none; }

.numbers { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); background: rgba(6, 23, 56, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); text-align: center; }
.numbers b { display: block; font-weight: 300; font-size: 21px; color: var(--cream); letter-spacing: .02em; }
.numbers span { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: rgba(227, 207, 163, .72); }
@media (min-width: 700px) { .numbers { padding-left: calc(50% - 300px); padding-right: calc(50% - 300px); } .words p { font-size: 17px; } }