/* ------------------------------------------------------------------
   SAM · the index (site-index.js)

   The floors down 64% of a desktop, a band per floor, each a dimmed
   sliver of its render; the band under the pointer opens five times its
   neighbours' height onto the render in full. The panel beside them is
   kept quiet: the sales line at its head, small (the dock's phone and the
   number, Book a visit), then the title and two links. Over the film and
   the sales dock, under the chrome row (100), which carries the INDEX /
   Close button. On a phone it is one scrolling column.
------------------------------------------------------------------- */

/* the room the chrome row takes at the top */
#site-index{--ix-top:calc(var(--chrome-edge) * 2 + var(--chrome-size));
  position:fixed;inset:0;z-index:94;display:grid;grid-template-columns:64fr 36fr;
  background:var(--ink);color:var(--chalk);overscroll-behavior:contain}
#site-index[hidden]{display:none}
html.index-open{scrollbar-gutter:stable}
html.index-open body{overflow:hidden}
html.index-open #top-edge{visibility:hidden}

/* ── the floors ── */
.ix-floors{position:relative;display:flex;min-height:0;padding-top:var(--ix-top)}
.ix-list{flex:1;display:flex;flex-direction:column;list-style:none;margin:0;padding:0;min-height:0}
.ix-floor{position:relative;flex:1 1 0;min-height:0;border-top:1px solid var(--ink);
  transition:flex-grow .9s var(--ease-expo)}
.ix-floor.is-open{flex-grow:5.2}
.ix-band{position:absolute;inset:0;display:block;width:100%;margin:0;padding:0;border:0;overflow:hidden;
  background:var(--ink-800);color:inherit;font:inherit;text-align:start}
button.ix-band{cursor:pointer}
/* every floor shows a sliver of its render, dimmed; the open one in full */
.ix-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.42) saturate(.85);transform:scale(1.04);
  transition:filter .9s var(--ease-expo),transform 1.6s var(--ease-expo),opacity .8s var(--ease-expo)}
.ix-hi{opacity:0}
.ix-hi.is-in{opacity:1}
.is-open .ix-img{filter:brightness(.8) saturate(1);transform:scale(1)}
.ix-shade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease-expo);
  background:linear-gradient(to top,rgba(8,8,10,.6),rgba(8,8,10,0) 55%)}
.is-open .ix-shade{opacity:1}

/* the name: centred on its band, set large at the foot of the open one;
   on the wordmark's edge, so the list and the chrome share one margin */
.ix-lab{position:absolute;inset-inline-start:var(--chrome-edge);top:50%;transform:translateY(-50%);pointer-events:none;
  transition:top .9s var(--ease-expo),transform .9s var(--ease-expo)}
.is-open .ix-lab{top:calc(100% - 1.6rem);transform:translateY(-100%)}
.ix-t{display:block;font-family:var(--font-mono);font-weight:400;font-size:.8125rem;line-height:1.1;letter-spacing:.3em;
  text-transform:uppercase;color:var(--chalk);text-shadow:0 1px 14px rgba(8,8,10,.7);
  transition:font-size .9s var(--ease-expo),letter-spacing .9s var(--ease-expo)}
.is-open .ix-t{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,3.6vw,3.8rem);letter-spacing:-.005em;
  text-shadow:0 2px 30px rgba(8,8,10,.5)}
html[lang="fa"] .ix-t{letter-spacing:.04em;font-size:.95rem;line-height:1.5}
html[lang="fa"] .is-open .ix-t{font-weight:500;letter-spacing:0;font-size:clamp(1.9rem,3vw,3.1rem)}

.ix-go{position:absolute;inset-inline-end:var(--chrome-edge);bottom:1.9rem;display:flex;align-items:center;gap:.8rem;pointer-events:none;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--electric);
  opacity:0;transition:opacity .6s var(--ease-expo)}
.is-open .ix-go{opacity:1;transition-delay:.2s}

/* a group's band: a link per space, at the open band's foot */
.ix-subs{position:absolute;inset-inline-end:var(--chrome-edge);bottom:1.5rem;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;
  max-width:55%;opacity:0;visibility:hidden;transition:opacity .6s var(--ease-expo),visibility 0s .6s}
.is-open .ix-subs{opacity:1;visibility:visible;transition-delay:.2s,0s}
.ix-sub{display:inline-flex;align-items:center;gap:.7rem;height:var(--chrome-size);padding:0 1.05rem;cursor:pointer;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--chalk);
  background:rgba(8,8,10,.45);border:1px solid var(--hairline-strong);backdrop-filter:blur(10px);
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
html[lang="fa"] .ix-sub{letter-spacing:.04em;font-size:.8rem}

/* ── the panel ── */
/* the sales line at its head, small; the title and two links under it;
   nothing else */
.ix-panel{display:flex;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:none;
  padding:calc(var(--ix-top) + clamp(1rem,3vh,2rem)) clamp(1.5rem,3.4vw,3.4rem) clamp(1.5rem,4vh,3rem);
  border-inline-start:1px solid var(--hairline);
  /* on a short screen the panel scrolls: its copy fades out under the chrome row */
  -webkit-mask-image:linear-gradient(transparent calc(var(--ix-top) - .5rem),#000 calc(var(--ix-top) + 1rem));
          mask-image:linear-gradient(transparent calc(var(--ix-top) - .5rem),#000 calc(var(--ix-top) + 1rem))}
.ix-sales{display:flex;flex-wrap:wrap;gap:.5rem}
/* the dock's pill: its phone in a square, the number beside it */
.ix-call{display:inline-flex;align-items:stretch;height:var(--chrome-size);text-decoration:none;color:var(--chalk);
  border:1px solid var(--hairline-strong);transition:border-color .35s var(--ease-expo),color .35s var(--ease-expo)}
/* a square the chrome's height; the glyph, 1.05rem, sits in its middle */
.ix-call-icon{flex:none;box-sizing:border-box;width:calc(var(--chrome-size) - 2px);height:auto;
  padding:0 calc((var(--chrome-size) - 2px - 1.05rem) / 2);color:var(--electric);
  border-inline-end:1px solid var(--hairline-strong)}
.ix-call-num{display:flex;align-items:center;padding:0 1rem;font-family:var(--font-display);font-size:.95rem;letter-spacing:.03em;white-space:nowrap}
.ix-btn{display:inline-flex;align-items:center;height:var(--chrome-size);padding:0 1.3rem;cursor:pointer;text-decoration:none;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);background:var(--electric);border:1px solid var(--electric);
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
html[lang="fa"] .ix-btn{letter-spacing:.04em;font-size:.875rem}

.ix-title{margin:clamp(2.2rem,7vh,4.5rem) 0 0;max-width:12ch;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.8rem,2.8vw,2.8rem);line-height:1.08;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
html[lang="fa"] .ix-title{font-weight:500;line-height:1.45;text-transform:none}
.ix-links{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--hairline-strong)}
.ix-link{display:flex;width:100%;justify-content:space-between;align-items:center;gap:1rem;margin:0;padding:1.15rem 0;
  border:0;border-bottom:1px solid var(--hairline-strong);background:none;cursor:pointer;text-decoration:none;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--chalk);
  transition:color .35s var(--ease-expo)}
html[lang="fa"] .ix-link{letter-spacing:.04em;font-size:.875rem}
.ix-meta{font-size:.6875rem;color:var(--chalk-faint);letter-spacing:.2em}
html[lang="fa"] .ix-meta{letter-spacing:0}

.ix-arrow{position:relative;display:inline-block;flex:none;width:1.1rem;height:1px;background:currentColor}
.ix-arrow::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
html[dir="rtl"] .ix-arrow{transform:scaleX(-1)}

@media (hover:hover){
  .ix-sub:hover{color:var(--ink);background:var(--electric);border-color:var(--electric)}
  .ix-link:hover{color:var(--electric)}
  .ix-btn:hover{background:var(--chalk);border-color:var(--chalk)}
  .ix-call:hover{border-color:var(--electric);color:var(--electric)}
}
html.kbd .ix-band:focus-visible,html.kbd .ix-sub:focus-visible,html.kbd .ix-link:focus-visible,
html.kbd .ix-btn:focus-visible,html.kbd .ix-call:focus-visible{outline:1px solid var(--electric);outline-offset:-1px}
#site-index :focus:not(:focus-visible){outline:none}

/* the dock's bar steps aside on a desktop: the panel says its number; its
   card still comes up over the index for Book a visit */
@media (min-width:821px){
  html.index-open #sales-dock:not(.is-open) .dock-pill{opacity:0;visibility:hidden}
}

/* ── the button in the chrome row ── */
/* Close's place on a space page (spaces.css: .sp-bar), which has its own
   there: hidden while one is open, and under the loader */
#index-toggle{position:fixed;top:var(--chrome-edge);inset-inline-end:calc(var(--chrome-edge) + var(--chrome-size) + var(--chrome-gap));
  z-index:100;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  height:var(--chrome-size);min-width:var(--chrome-size);padding:0 .95rem;cursor:pointer;
  font-family:var(--font-mono);font-size:.6875rem;line-height:1;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chalk-dim);background:rgba(20,18,15,.4);border:1px solid var(--hairline-strong);backdrop-filter:blur(10px);
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo),
             opacity .8s var(--ease-expo) .5s,visibility 0s}
html[lang="fa"] #index-toggle{letter-spacing:.04em;font-size:.8rem}
html.is-loading #index-toggle,html.space-open #index-toggle{opacity:0;visibility:hidden;transition:none}
.ix-label-close,html.index-open .ix-label-open{display:none}
html.index-open .ix-label-close{display:inline}
.ix-glyph{position:relative;display:block;width:.9rem;height:.45rem}
.ix-glyph i{position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .5s var(--ease-expo),top .5s var(--ease-expo)}
.ix-glyph i:first-child{top:0}
.ix-glyph i:last-child{top:100%}
html.index-open .ix-glyph i{top:50%}
html.index-open .ix-glyph i:first-child{transform:rotate(45deg)}
html.index-open .ix-glyph i:last-child{transform:rotate(-45deg)}
@media (hover:hover){#index-toggle:hover{color:var(--ink);background:var(--electric);border-color:var(--electric)}}
html.kbd #index-toggle:focus-visible{color:var(--ink);background:var(--electric);border-color:var(--electric);outline:none}

/* ── the hero's call to action ── */
.hero-explore{display:inline-flex;align-items:center;gap:.9rem;margin-top:2.2rem;height:var(--chrome-size);padding:0 1.35rem;
  pointer-events:auto;cursor:pointer;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--electric-soft);background:rgba(8,8,10,.3);border:1px solid rgba(234,217,184,.5);backdrop-filter:blur(8px);
  transition:color .35s var(--ease-expo),background-color .35s var(--ease-expo),border-color .35s var(--ease-expo)}
.hero-explore i{position:relative;display:block;width:1.1rem;height:1px;background:currentColor;transition:transform .5s var(--ease-expo)}
.hero-explore i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
html[dir="rtl"] .hero-explore i{transform:scaleX(-1)}
html[lang="fa"] .hero-explore{letter-spacing:.06em;font-size:.875rem}
@media (hover:hover){
  .hero-explore:hover{color:var(--ink);background:var(--electric);border-color:var(--electric)}
  .hero-explore:hover i{transform:translateX(.25rem)}
  html[dir="rtl"] .hero-explore:hover i{transform:scaleX(-1) translateX(.25rem)}
}
html.kbd .hero-explore:focus-visible{color:var(--ink);background:var(--electric);border-color:var(--electric);outline:none}
.hero-explore:active{transform:scale(.98)}

@media (prefers-reduced-motion:reduce){
  .ix-floor,.ix-img,.ix-lab,.ix-t{transition:none}
}

/* ── a phone ── */
@media (max-width:820px){
  #site-index{display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* the list scrolls under the chrome row: a shade for it to fade into */
  #site-index::before{content:"";position:fixed;z-index:2;left:0;right:0;top:0;pointer-events:none;
    height:calc(var(--ix-top) + .75rem);background:linear-gradient(var(--ink) 55%,rgba(8,8,10,0))}
  /* the panel's parts are laid out around the floors: sales, title, floors, links */
  .ix-panel{display:contents;-webkit-mask-image:none;mask-image:none}
  .ix-sales{order:0;padding:calc(var(--ix-top) + 1rem) 1.25rem 0}
  .ix-title{order:1;max-width:none;margin:0;padding:1.8rem 1.25rem 1.4rem}
  .ix-floors{order:2;padding-top:0}
  /* a column that scrolls: nothing in it may shrink to fit the screen */
  .ix-floors,.ix-panel > *{flex-shrink:0}
  .ix-links{order:3;margin:1.6rem 1.25rem calc(var(--dock-clear) + 2rem + env(safe-area-inset-bottom))}
  .ix-go{display:none}
  .ix-list{gap:2px}
  .ix-floor,.ix-floor.is-open{flex:none;height:clamp(5.5rem,27vw,9rem);transition:none}
  .ix-img,.is-open .ix-img{filter:brightness(.55) saturate(.95);transform:none}
  .ix-hi{display:none}
  .ix-shade,.is-open .ix-shade{opacity:1}
  .ix-lab,.is-open .ix-lab{inset-inline-start:1.25rem;top:auto;bottom:1rem;transform:none}
  .ix-t,.is-open .ix-t{font-family:var(--font-display);font-weight:400;font-size:1.25rem;letter-spacing:.01em}
  html[lang="fa"] .ix-t,html[lang="fa"] .is-open .ix-t{font-size:1.2rem;font-weight:500}
  /* a group's links stay out, under its name */
  .ix-group,.ix-group.is-open{height:auto}
  .ix-group .ix-band{position:relative;padding:3.4rem 1.25rem 1rem}
  .ix-group .ix-lab{top:1.1rem;bottom:auto;inset-inline-start:1.25rem}
  .ix-subs,.is-open .ix-subs{position:relative;inset:auto;max-width:none;justify-content:flex-start;
    opacity:1;visibility:visible;transition:none}
  /* the label is for screen readers; the glyph is the button */
  #index-toggle{width:var(--chrome-size);padding:0}
  #index-toggle .ix-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}