:root{--ink:#171714;--paper:#f4f1e9;--warm:#d8d0c0;--line:#b7ad9b;--serif:"Times New Roman",Georgia,serif;--sans:Arial,Helvetica,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--ink);font-family:var(--sans);overflow-x:hidden;background:var(--ink)}
button,a,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.en{display:none}
html[lang=en] .ru{display:none}
html[lang=en] .en{display:initial}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip{position:fixed;z-index:1000;left:12px;top:-80px;background:#fff;color:#000;padding:12px}
.skip:focus{top:12px}
/* The viewport owns the canvas; content flows independently of image dimensions. */
.public-home{display:flex;flex-direction:column;min-height:100dvh;isolation:isolate}
.site-header{position:relative;z-index:40;display:flex;align-items:center;gap:1rem;padding:max(1rem,env(safe-area-inset-top)) max(4vw,env(safe-area-inset-right)) 1rem max(4vw,env(safe-area-inset-left));color:#f5efe7}
.brand{flex:0 0 auto;display:flex;align-items:center;min-height:44px}
.brand img{display:block;width:clamp(3rem,5vmin,4rem);height:auto;max-height:4rem;object-fit:contain;filter:brightness(0) invert(1)}
.desktop-menu{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;margin-left:auto;min-width:0}
.desktop-menu button{min-height:44px;border:0;background:none;color:#f5efe7;padding:.5rem 0;font-size:.875rem;line-height:1.3;cursor:pointer;text-shadow:0 1px 8px #000}
.menu-button{display:grid;align-content:center;justify-items:center;gap:6px;flex:0 0 44px;width:44px;height:44px;border:0;background:transparent;padding:8px;cursor:pointer}
.menu-button span{display:block;width:28px;height:1px;background:#f5efe7;box-shadow:0 1px 5px #0008}
.public-home main{flex:1;display:flex;min-width:0}
.hero{display:flex;flex:1;min-width:0}
.hero-stage{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(1.5rem,6vmin,5rem);width:100%;padding:clamp(1rem,16dvh,14rem) max(5vw,env(safe-area-inset-right)) max(4vmin,env(safe-area-inset-bottom)) max(5vw,env(safe-area-inset-left))}
.hero-scene{position:fixed;inset:0;display:block;z-index:-1;pointer-events:none}
.hero-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.eyebrow{font:400 .625rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.hero-copy{width:100%;max-width:42ch;color:#f5efe7;text-shadow:0 2px 10px #000b}
.hero-copy .eyebrow{margin:0 0 1.25em;color:#edb58d}
.hero-copy h1{font:400 clamp(2rem,calc(1rem + 4vmin),4.75rem)/1.12 var(--serif);letter-spacing:-.035em;margin:0 0 .4em;overflow-wrap:anywhere}
.hero-copy em{font-size:.82em;font-weight:400;letter-spacing:-.025em}
.hero-description{font:400 clamp(1rem,1.7vmin,1.125rem)/1.6 var(--sans);max-width:34ch;margin:0;color:#f0e9df}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.75rem,1.5vw,1rem);align-items:stretch}
.hero-actions>*{flex:0 1 auto;width:auto;max-width:100%;font-size:.875rem}
.primary-action,.secondary-action{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:.75em 1.4em;border:1px solid currentColor;text-decoration:none;cursor:pointer;line-height:1.4;letter-spacing:.025em;text-align:center}
.primary-action{background:#201b17a6;color:#f5efe7;border-color:#edb58d99}
.hero .secondary-action{background:#12100ba6;color:#f5efe7;border-color:#c2b8a566}
@media(max-width:70rem){.desktop-menu{display:none}}
dialog{border:0;padding:0}
dialog::backdrop{background:#11100dd1;backdrop-filter:blur(8px)}
.menu-dialog{inset:0 0 0 auto;width:min(94vw,480px);height:100dvh;max-width:none;max-height:none;margin:0;padding:max(22px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom));color:#f4ede4;background:linear-gradient(180deg,#14131070 0,#141310e8 38%,#141310 70%) #141310;box-shadow:-24px 0 80px #0005;overflow-y:auto;overscroll-behavior:contain}
.menu-dialog::backdrop{background:#14131070;backdrop-filter:blur(3px)}
.menu-dialog header,.contact-dialog header,.information-dialog header{display:flex;align-items:center;justify-content:space-between}
.contact-dialog header button,.information-dialog header button{min-height:44px;min-width:44px;border:0;background:none;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.menu-brand{width:62px;height:52px;object-fit:contain;filter:brightness(0) invert(1)}
.menu-dialog header button{width:44px;height:44px;border:1px solid #f4ede43d;border-radius:50%;background:#14131066;color:#f4ede4;font:300 30px/1 var(--sans);cursor:pointer}
.menu-invitation{margin:42px 0 26px}.menu-invitation .eyebrow{font-size:9px;letter-spacing:.16em;color:#efb58b;line-height:1.7}
.menu-invitation h2{font:400 clamp(38px,6vw,54px)/1.02 var(--serif);letter-spacing:-.035em;margin:18px 0 22px}.menu-invitation h2 em{font-weight:400;color:#f1c2a0}
.menu-promise{max-width:340px;margin:0;font:400 14px/1.75 var(--sans);color:#d3cbc1}
.menu-start{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:58px;padding:16px 18px;border:1px solid #eeb68f;background:#edb58d;color:#241c16;font:500 14px/1.4 var(--sans);text-align:left;cursor:pointer}.menu-start>span:last-child{font-size:24px}
.menu-invite-note{margin:12px 0 26px;font:400 11px/1.6 var(--sans);color:#bdb4aa}
.menu-dialog nav{display:grid;margin:0 0 28px;border-top:1px solid #f4ede429}
.menu-dialog nav button{display:flex;align-items:center;justify-content:space-between;gap:16px;border:0;border-bottom:1px solid #f4ede429;background:none;color:#eee6dc;text-align:left;min-height:60px;padding:18px 0;font:400 21px/1.25 var(--serif);cursor:pointer}
.menu-dialog nav small,.menu-footer small{display:block;margin-top:6px;font:400 11px/1.5 var(--sans);color:#bdb4aa}
.menu-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.menu-footer a{color:#eee6dc;text-decoration:none;font-size:13px;min-height:44px}
.menu-dialog button:focus-visible,.menu-dialog a:focus-visible{outline:2px solid #f1c2a0;outline-offset:4px}.menu-dialog nav button:hover,.menu-footer a:hover{color:#efb58b}.menu-start:hover{background:#f4c7a5}
.contact-dialog,.information-dialog{width:min(680px,calc(100% - 24px));max-height:calc(100% - 24px);background:#eee9de;padding:26px;color:#1c1a17}
.contact-dialog h2,.information-dialog h2{font:400 clamp(38px,6vw,64px)/.96 var(--serif);letter-spacing:-.04em}
.information-dialog>div{font-size:16px;line-height:1.7}
.information-dialog .primary-action{margin-top:12px}
.contact-dialog form{display:grid;gap:16px}
.contact-dialog label{display:grid;gap:7px;font-size:12px;letter-spacing:.04em}
.contact-dialog input,.contact-dialog textarea{width:100%;border:1px solid #aaa294;background:#faf8f2;padding:14px;font-size:16px}
.contact-dialog textarea{border-radius:18px 18px 18px 3px}
.contact-dialog .primary-action{background:#1c1a17;color:#fff;width:100%}
@media(max-width:760px){.menu-invitation{margin-top:30px}.menu-dialog nav button{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero-business{margin:1.5em 0 0;max-width:34ch;font:400 clamp(1rem,1.7vmin,1.125rem)/1.6 var(--sans);color:#f0e9df}

.contact-dialog{margin:auto;overflow-y:auto;overscroll-behavior:contain}
.contact-dialog h2{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:1rem 0 1.5rem}
.contact-dialog .brief-help{font-size:.875rem;line-height:1.5;letter-spacing:normal}
.contact-dialog textarea{resize:vertical}
.brief-tools{display:flex;align-items:center;gap:.5rem}
.contact-dialog .brief-icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:transparent;border:0;border-radius:50%;color:inherit;cursor:pointer}
.brief-tools [hidden]{display:none}
.brief-file{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.5rem 0;overflow-wrap:anywhere}
.brief-file audio{width:100%;max-width:100%}
.brief-file span{flex:1;min-width:0}
#brief-error:empty,#inquiry-status:empty{display:none}
#brief-error{color:#903b29}
@media(max-width:760px){dialog.contact-dialog[open]{position:fixed;inset:var(--contact-viewport-top,0px) 0 auto;width:100vw;height:var(--visible-page-height,100dvh);max-height:var(--visible-page-height,100dvh)!important;max-width:100vw!important;margin:0;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));border-radius:0}}

.brief-composer{border:1px solid #aaa294;border-radius:22px;background:#faf8f2;padding:.5rem;min-width:0}
.contact-dialog .brief-composer textarea{border:0;border-radius:0;background:transparent;padding:.5rem;resize:none;box-shadow:none!important;outline:none!important}
.brief-composer .brief-tools{gap:.25rem}
#brief-record{margin-left:auto}
.contact-dialog #brief-send{background:#e2ded6;color:#8b877f;transition:background .15s,color .15s}
.contact-dialog #brief-send.ready{background:#edb58d;color:#241c16}
.brief-composer #brief-attachments,.brief-composer #brief-error{padding-inline:.5rem}
.contact-dialog input{border:0;border-bottom:1px solid #aaa294;background:transparent;border-radius:0}

@media(max-width:760px){
}

/* ---- the composer, the last thing in the form ----
   It was a fixed slot seven lines tall in the middle of the form, then it was
   pinned to the bottom of the dialog above the keyboard with everything else
   scrolling behind it. Pinned, it was always on the screen, and with the
   keyboard up the keyboard and the box between them took most of the glass:
   the form above could hardly be read. Reported 15 September 2026: "leave the
   textbox as the last element of the form and let me scroll through."

   So the whole form scrolls as one page and the textbox is its last field. It
   still starts at one line and grows as you type, and the send button is on
   its own row inside it. viewport-stability.js brings the whole box into view
   above the keyboard when it is tapped, so its buttons are never under it. */
dialog.contact-dialog[open]{display:flex;flex-direction:column}
.contact-dialog form#inquiry{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.brief-scroll{display:grid;gap:16px;align-content:start;padding-bottom:12px}
.contact-dialog .brief-composer{margin-top:8px}
.contact-dialog .brief-composer textarea{
  min-height:2.6em;max-height:42svh;height:2.6em;overflow-y:hidden;
  line-height:1.5;display:block}
/* Files waiting to be sent stack above the box, so adding one grows the
   composer upward and the send button does not move under the finger. */
/* You see what you are sending. A photograph shows as the photograph, a
   recording plays, a document is named. The name used to be all you got. */
.brief-file{display:block;margin:.5rem 0;padding:.5rem;border-radius:14px;background:#efeae0}
.brief-file-head{display:flex;align-items:center;gap:.5rem}
.brief-file-head span{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}
/* A preview, not a display: enough to know which photograph it is, without
   taking the room the message needs. */
.brief-thumb{display:block;width:100%;height:110px;object-fit:cover;border-radius:10px;margin-top:.4rem;background:#e3ddd1}
.brief-file audio,.brief-file video{display:block;width:100%;margin-top:.4rem}
.brief-file video{max-height:150px;border-radius:10px;background:#000}
.brief-composer #brief-attachments:empty{display:none}
.brief-composer #brief-attachments{max-height:190px;overflow-y:auto;overscroll-behavior:contain}
.brief-thumb{height:96px}
/* While the keyboard is up the screen belongs to what is being written. The
   title shrinks and the help text, already read, gets out of the way. */
.contact-dialog.keyboard-open h2{font-size:1.25rem;line-height:1.2;margin:0 0 .6rem}
.contact-dialog.keyboard-open .brief-help{display:none}
/* Nothing in the form may make it wider than the dialog. When the fields had a
   scroller of their own it capped them; with the form scrolling as one page
   the widest thing inside set the width instead -- the Georgian working-hours
   option, through a fieldset, which by default never shrinks below its
   content -- and the right-hand column ran off the dialog. Reported
   15 September 2026 in Georgian. Every column may shrink, and a select shows
   as much of its choice as fits. */
.brief-scroll{grid-template-columns:minmax(0,1fr)}
.brief-scroll>*,.contact-dialog fieldset.brief-reach{min-width:0}
.brief-grid,.brief-when{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.brief-grid,.brief-when{grid-template-columns:minmax(0,1fr)}}
.contact-dialog .brief-grid input,.contact-dialog .brief-reach select{width:100%;min-width:0;max-width:100%;text-overflow:ellipsis}
.contact-dialog form#inquiry{overflow-x:hidden}