/* ---------- the two offices, Baku and Nahariya (owner, 2026-11-02): COMING SOON, no date on the page.
   Section on contact and home, one row in the footer of every page. Self-contained: the home page does not load
   dinar-c.css, so every token has its value as a fallback.

   The staging follows the research in _preview/offices-launch.html:
   - an unveiling, not a countdown: a gold line draws, the two cities rise letter by letter, one light passes over them,
     COMING SOON settles from wide tracking, and each card opens like the ivory curtain of the home film;
   - everything plays ONCE when it comes into view and then rests (WCAG 2.2.2: nothing keeps moving), and a visitor who
     asked the system for less motion sees the final state at once;
   - a partial reveal (the cities, their coordinates and the time there, but no address yet) and an invitation to be the
     first to know. ---------- */
.offices{--o-gold:var(--gold,#C9A972);--o-deep:var(--gold-deep,#86672c);--o-esp:var(--espresso,#211C17);--o-ivory:var(--ivory,#F4F0E7);
  --o-lat:var(--f-lat,"Cormorant Garamond",Georgia,serif);--o-metal:var(--metal,linear-gradient(105deg,#8a6a30 0%,#c9a972 22%,#fbeec6 46%,#d2b47c 58%,#8f6f35 100%));
  --o-ease:cubic-bezier(.2,.7,.2,1);background:radial-gradient(90% 60% at 50% 0%,rgba(201,169,114,.13),transparent 60%),var(--o-esp);color:var(--o-ivory)}

/* the head: label, a gold line, the two cities, COMING SOON, one sentence */
.ofx-head{display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.ofx-label{color:var(--o-gold)}
.ofx-line{display:block;width:min(420px,60%);height:1px;margin:22px 0 clamp(26px,4vh,40px);background:linear-gradient(90deg,transparent,var(--o-gold),transparent)}
.ofx-cities{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.18em .5em;margin:0;direction:ltr;font-family:var(--o-lat);font-weight:500;font-size:clamp(40px,8.4vw,128px);line-height:1;letter-spacing:.08em}
.ofx-w{display:inline-flex;overflow:hidden;padding:.06em .02em .1em;color:#d8bd86}
.ofx-w.metal{background:var(--o-metal);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.ofx-w>span{display:inline-block}
.ofx-dot{width:.14em;height:.14em;transform:rotate(45deg);background:var(--o-gold);flex:none}
.ofx-soon{margin:clamp(20px,3vh,30px) 0 0;font-family:var(--o-lat);font-size:clamp(13px,1.5vw,19px);letter-spacing:.42em;padding-inline-start:.42em;color:rgba(244,240,231,.86);direction:ltr}
.offices .off-lead{margin:18px auto 0;max-width:46ch;color:rgba(244,240,231,.7);font-size:clamp(15px,1.2vw,17px)}

/* the cards */
.off-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(40px,7vh,72px)}
.off{background:var(--paper,#fffdf8);color:var(--o-esp);display:flex;flex-direction:column;box-shadow:0 40px 80px -50px rgba(0,0,0,.8)}
.off-vis{position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 110%,rgba(201,169,114,.28),transparent 60%),#1a1612;color:var(--o-ivory)}
.off-vis::before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(201,169,114,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,114,.08) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.off-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.off-vis:has(img)::before{display:none}
.off-vis:has(img)::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(33,28,23,.1),rgba(33,28,23,.72))}
.off-city{position:relative;z-index:2;font-family:var(--o-lat);font-weight:500;font-size:clamp(30px,12.5cqi,104px);letter-spacing:.1em;padding-inline-start:.1em;line-height:1;direction:ltr;background:var(--o-metal);background-size:240% 100%;background-position:30% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.off-soon{position:relative;z-index:2;display:flex;align-items:center;gap:14px;margin-top:14px;font-family:var(--o-lat);font-size:clamp(11px,1.1vw,13px);letter-spacing:.42em;padding-inline-start:.42em;color:rgba(244,240,231,.82);direction:ltr}
.off-soon::before,.off-soon::after{content:"";width:clamp(22px,4vw,46px);height:1px;background:linear-gradient(90deg,transparent,var(--o-gold))}
.off-soon::after{background:linear-gradient(90deg,var(--o-gold),transparent)}
.off-no{position:absolute;z-index:2;top:18px;inset-inline-start:20px;font-family:var(--o-lat);font-size:15px;letter-spacing:.2em;color:var(--o-gold)}
.off-geo{position:absolute;z-index:2;bottom:16px;inset-inline:0;text-align:center;font-family:var(--o-lat);font-size:13px;letter-spacing:.18em;color:rgba(244,240,231,.62);direction:ltr}
/* the curtain: two panels with a gold seam, closed until the card is seen */
.ofx-door{position:absolute;top:0;bottom:0;width:50.5%;z-index:3;background:linear-gradient(180deg,#2a231d,#1b1612);pointer-events:none;transform:translateX(0)}
.ofx-door.l{left:0;box-shadow:inset -1px 0 0 rgba(201,169,114,.55)}
.ofx-door.r{right:0;box-shadow:inset 1px 0 0 rgba(201,169,114,.55)}
.off-body{padding:clamp(22px,2.6vw,34px)}
.off-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.off-top h3{margin:0;font-size:calc(var(--hs,1)*clamp(26px,2.4vw,36px))}
.off-badge{font-family:var(--o-lat);font-size:11px;font-weight:500;letter-spacing:.32em;direction:ltr;color:var(--o-deep);border:1px solid rgba(134,103,44,.45);padding:5px 12px 4px calc(12px + .32em);border-radius:30px;white-space:nowrap}
.off-country{display:block;margin-top:6px;font-size:12.5px;letter-spacing:var(--track,.18em);color:var(--taupe,#9A8775)}
.off-rows{margin:20px 0 0;display:grid}
.off-rows>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--stone,#DED6C8);font-size:15px}
.off-rows dt{color:var(--taupe,#9A8775)}
.off-rows dd{margin:0;text-align:end}
.off-clock,.off-tel{font-family:var(--o-lat);font-size:17px;letter-spacing:.06em;direction:ltr;unicode-bidi:isolate;color:inherit}
.off-map{display:inline-block;margin-top:16px;font-size:13px;letter-spacing:var(--track,.18em);font-weight:500;color:var(--o-esp);border-bottom:1px solid var(--o-deep);padding-bottom:4px}

/* the invitation: one field, the lowest friction there is */
.ofx-inv{margin:clamp(48px,8vh,84px) auto 0;max-width:620px;text-align:center}
.ofx-inv .label{color:var(--o-gold)}
.ofx-inv h3{margin:12px 0 0;font-size:calc(var(--hs,1)*clamp(28px,3vw,42px));color:var(--o-ivory)}
.ofx-inv>p{margin:10px 0 0;color:rgba(244,240,231,.72);font-size:16px}
.ofx-row{display:flex;gap:0;margin-top:22px;border-bottom:1px solid rgba(201,169,114,.55)}
.ofx-row input{flex:1;min-width:0;background:transparent;border:0;color:var(--o-ivory);font-family:var(--o-lat);font-size:22px;letter-spacing:.06em;padding:12px 4px;text-align:right}
.ofx-row input::placeholder{color:rgba(244,240,231,.35)}
.ofx-row input:focus{outline:none}
.ofx-row:focus-within{border-color:var(--o-gold)}
.ofx-row button{flex:none;background:var(--o-metal);background-size:220% 100%;background-position:100% 0;border:0;color:var(--o-esp);font:inherit;font-weight:700;font-size:14px;letter-spacing:.06em;padding:0 22px;cursor:pointer;transition:background-position 1s var(--o-ease)}
.ofx-row button:hover,.ofx-row button:focus-visible{background-position:0 0}
.ofx-note{margin-top:12px!important;font-size:12.5px!important;color:rgba(244,240,231,.5)!important}
.ofx-note a{color:inherit;text-decoration:underline}
.ofx-msg{min-height:1.6em;margin-top:10px!important;color:var(--o-gold)!important;font-size:15px!important}
.ofx-inv{position:relative}
.ofx-inv .hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.ofx-inv .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ofx-inv.sent .ofx-row,.ofx-inv.sent .ofx-note{display:none}

/* ---------- the unveiling: only when offices.js is there to start it (.ofx-ready), only once (.ofx-on) ---------- */
.ofx-ready .ofx-line{transform:scaleX(0);transition:transform .9s var(--o-ease)}
.ofx-ready .ofx-w>span{transform:translateY(105%);transition:transform .95s var(--o-ease);transition-delay:calc(.35s + var(--i)*45ms)}
.ofx-ready .ofx-dot{transform:rotate(45deg) scale(0);transition:transform .6s var(--o-ease) .9s}
.ofx-ready .ofx-soon{opacity:0;letter-spacing:.9em;transition:opacity 1.3s ease 1.5s,letter-spacing 1.6s var(--o-ease) 1.5s}
.ofx-ready .ofx-head .off-lead,.ofx-ready .ofx-label{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s var(--o-ease)}
.ofx-ready .ofx-head .off-lead{transition-delay:2.1s}
.ofx-ready.ofx-on .ofx-line{transform:none}
.ofx-ready.ofx-on .ofx-w>span{transform:none}
.ofx-ready.ofx-on .ofx-dot{transform:rotate(45deg) scale(1)}
.ofx-ready.ofx-on .ofx-soon{opacity:1;letter-spacing:.42em}
.ofx-ready.ofx-on .ofx-head .off-lead,.ofx-ready.ofx-on .ofx-label{opacity:1;transform:none}
.ofx-w.metal.sweep{animation:ofxSweep 1.9s var(--o-ease) forwards}
@keyframes ofxSweep{from{background-position:100% 0}to{background-position:0 0}}
/* the curtains open when their card is seen; the city settles in behind them */
.ofx-ready .off .ofx-door{transition:transform 1.25s cubic-bezier(.7,0,.2,1)}
.ofx-ready .off .off-city,.ofx-ready .off .off-soon,.ofx-ready .off .off-geo{opacity:0;transition:opacity 1s ease .7s}
.ofx-ready .off.ofx-open .ofx-door.l{transform:translateX(-101%)}
.ofx-ready .off.ofx-open .ofx-door.r{transform:translateX(101%)}
.ofx-ready .off.ofx-open .off-city,.ofx-ready .off.ofx-open .off-soon,.ofx-ready .off.ofx-open .off-geo{opacity:1}
.ofx-ready .off:nth-child(2) .ofx-door{transition-delay:.18s}
.ofx-ready .ofx-inv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s var(--o-ease)}
.ofx-ready .ofx-inv.ofx-open{opacity:1;transform:none}
/* no JS or less motion: the final state, still */
.ofx-door{display:none}
.ofx-ready .ofx-door{display:block}
@media (prefers-reduced-motion:reduce){
  .ofx-ready .ofx-door{display:none}
  .ofx-ready *{transition:none!important;animation:none!important}
}

@media (max-width:760px){.off-grid{grid-template-columns:1fr}}
@media (max-width:480px){.ofx-soon{letter-spacing:.3em}.off-soon{letter-spacing:.3em}.ofx-row input{font-size:19px}.ofx-row button{padding:0 14px;font-size:13px}}

/* ---------- the footer row ---------- */
.ft-off{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid rgba(201,169,114,.24);font-size:13px;color:#cfc5b4}
.ft-off .label{color:var(--gold,#C9A972);margin-inline-end:6px}
.ft-off a{color:var(--ivory,#F4F0E7);font-weight:500;letter-spacing:.06em}
.ft-off i{font-style:normal;color:rgba(201,169,114,.6)}
.ft-off .ft-soon{margin-inline-start:auto;font-family:var(--f-lat,"Cormorant Garamond",Georgia,serif);letter-spacing:.32em;direction:ltr;font-size:12.5px;color:var(--gold,#C9A972)}
@media (max-width:700px){.ft-off .ft-soon{margin-inline-start:0;width:100%}}

/* the teaser on home and contact (2026-11-02, later): the head only, and the way to /offices */
.ofx-teaser{padding-block:clamp(70px,12vh,130px)}
.ofx-go{margin-top:30px;display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border:1px solid rgba(201,169,114,.6);color:var(--o-ivory);font-size:14px;letter-spacing:.08em;font-weight:500;transition:background .5s,color .5s}
.ofx-go:hover,.ofx-go:focus-visible{background:var(--o-gold);color:var(--o-esp)}
.ofx-ready .ofx-go{opacity:0;transform:translateY(12px);transition:opacity .8s ease 2.4s,transform .8s var(--o-ease) 2.4s,background .5s,color .5s}
.ofx-ready.ofx-on .ofx-go{opacity:1;transform:none}
.ofx-teaser .ofx-cities{font-size:clamp(34px,5.6vw,92px)}