/* Haykala — presentation look applied to the website.
   Same logo rendering, same ambient background (ghost mark camera + dust), same dark palette. */
:root{--hair-light:rgb(204 174 112 / .22);--color-gold-ink:#CCAE70;--color-slate:#A3AEC2;--green-mini:#3E8A6B}
html{background:var(--color-navy-deep)}
html body{background:transparent}

/* ---------- ambient background (identical layers to the presentation stage) ---------- */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;isolation:isolate;
  background:
    radial-gradient(1100px 700px at 75% 12%,rgba(46,105,83,.20),transparent 62%),
    radial-gradient(900px 640px at 18% 92%,rgba(204,174,112,.08),transparent 62%),
    linear-gradient(160deg,#13284C 0%,#0F1E3A 46%,#091428 100%)}
.amb::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(204,174,112,.10) 1px,transparent 1.4px);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 78%)}
.amb::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(4,9,20,.6) 100%)}
.amb canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}

/* sections sit on the ambient background instead of covering it */
.hero,.page-head{background:transparent}
.hero:before{display:none}
.page-head .ghost{display:none!important}
.plate-navy{background:rgb(15 30 58 / .38)}
.plate-deep{background:rgb(9 20 40 / .46)}
.paper{background:rgb(22 42 77 / .26);color:var(--color-ivory)}
.paper,.plate-navy,.plate-deep{border-top:1px solid rgb(204 174 112 / .10)}
.site-foot{background:rgb(9 20 40 / .72)}

/* former light sections, now in the presentation's dark palette */
.paper .btn-gold{background:var(--color-gold);color:var(--color-navy-deep)}
.paper .btn-gold:hover{background:var(--color-gold-hi)}
.paper .btn-line{border-color:var(--hair-dark);color:var(--color-ivory)}
.paper .btn-line:hover{border-color:var(--color-gold);color:var(--color-gold)}
.paper .link{text-decoration-color:#ccae7066}
.paper .mark .arm{fill:var(--color-gold)}
.paper .mark .jt{fill:var(--color-green)}
.paper .seq,.seq{--plate-bg:#0F1E3A}
.dpath .node{background:#0F1E3A}
.dpath .dia{background:#0F1E3A}
.dpath .end-node .dia{background:var(--color-gold);border-color:var(--color-gold)}
.chip{background:rgb(255 255 255 / .03)}
.svc-card:hover{background:rgb(204 174 112 / .06)}
.text-navy{color:var(--color-ivory)}
.bg-ivory-deep{background-color:rgb(22 42 77 / .55)}

/* ---------- logo: exact rendering used in the presentation ---------- */
.mark .arm{fill:var(--color-gold)}
.mark .jt{fill:var(--color-green)}
.brand{gap:14px}
.brand .mark{width:42px;height:42px}
.brand .mark .arm{fill:#CCAE70}
.brand .mark .jt{fill:var(--green-mini)}
.brand-txt{gap:5px;line-height:1;align-items:flex-start}
.brand-name{font-family:"Reem Kufi","Readex Pro","Segoe UI",Tahoma,sans-serif;font-size:24px;font-weight:600;line-height:1;color:var(--color-ivory)}
.brand-latin{font-family:var(--font-body);font-size:10px;letter-spacing:.42em;line-height:1;margin-top:0;color:var(--color-gold)}
@media (max-width:47.99rem){.brand .mark{width:34px;height:34px}.brand-name{font-size:20px}.brand-latin{display:none}}

.lockup .arm,.lockup .jt,.lockup .word,.lockup .sub{stroke-width:2.2;stroke-linejoin:round}
.lockup .arm{fill:var(--color-gold);stroke:var(--color-gold)}
.lockup .jt{fill:var(--color-green);stroke:var(--color-green-hi)}
.lockup .word{fill:var(--color-ivory);stroke:var(--color-ivory)}
.lockup .sub{fill:var(--color-gold);stroke:var(--color-gold)}

.logo{display:block;width:100%;height:auto;overflow:visible}
.logo .lg{stroke-width:2.2;stroke-linejoin:round}
.logo .c-gold{fill:var(--color-gold);stroke:var(--color-gold)}
.logo .c-green{fill:var(--color-green);stroke:var(--color-green-hi)}
.logo .c-ivory{fill:var(--color-ivory);stroke:var(--color-ivory)}
.logo.draw .lg-arm,.logo.draw .lg-joint{stroke-dasharray:1;stroke-dashoffset:0;
  animation:lgStroke 1.9s cubic-bezier(.65,0,.35,1) both,lgFill .9s ease both;
  animation-delay:calc(var(--t) * 1ms),calc(var(--t) * 1ms + 1200ms)}
.logo.draw .lg-letter{transform-box:fill-box;animation:lgLetter 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--t) * 1ms)}
.logo .sheen{transform:translateX(-420px);animation:sheen 2.6s ease-in-out both;animation-delay:2.7s}
@keyframes lgStroke{from{stroke-dashoffset:1}}
@keyframes lgFill{from{fill-opacity:0}}
@keyframes lgLetter{from{opacity:0;transform:translateY(26px)}}
@keyframes sheen{from{transform:translateX(-420px)}to{transform:translateX(1150px)}}

/* home hero: the presentation cover lockup */
.hero-figure.cover-logo{aspect-ratio:765/745;width:min(100%,30rem)}
.hero-figure.cover-logo::before{content:"";position:absolute;inset:-12% -12% -6%;background:radial-gradient(circle at 50% 42%,rgba(204,174,112,.14),transparent 62%);pointer-events:none}
@media (max-width:47.99rem){.hero-figure.cover-logo{width:min(62vw,15rem)}}

/* inquiry form */
#inquiry{scroll-margin-top:84px}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.multi{margin:0;padding:1.1rem 1.2rem 1.2rem;border:1px solid rgb(204 174 112 / .3);border-radius:10px;background:#0914288c}
.multi legend{padding-inline:.4rem;font-size:.95rem;font-weight:400}
.multi legend .opt{margin-inline-start:.5rem;font-size:var(--text-micro);color:var(--color-mist)}
.checks{display:grid;gap:.35rem 1.5rem}
@media (min-width:40rem){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.checks-h{grid-column:1/-1;margin:.6rem 0 .1rem;font-size:var(--text-micro);color:var(--color-gold)}
.checks-h:first-child{margin-top:0}
.check{display:flex;align-items:flex-start;gap:.6rem;padding:.3rem 0;font-size:var(--text-small);line-height:1.55;cursor:pointer}
.check input{flex:none;width:1.05rem;height:1.05rem;margin-top:.2rem;accent-color:var(--color-gold)}
#inquiry-form button[disabled]{opacity:.65;cursor:progress}
.foot-inq{display:inline-flex;flex-direction:column;gap:.2rem}
.foot-inq-l{font-size:var(--text-micro);color:var(--color-mist)}
.foot-inq:hover span[dir]{color:var(--color-gold-hi)}

@media (prefers-reduced-motion:reduce){.logo .lg,.logo .sheen{animation:none!important}.logo .sheen{display:none}}

/* company identifiers in the footer */
.foot-ids{display:inline-flex;flex-wrap:wrap;gap:.25rem 1.25rem}

/* header logo: always the English HAYKALA wordmark, in every language */
.brand .brand-logo{display:block;height:44px;width:auto}
.brand-logo .arm{fill:#CCAE70}
.brand-logo .jt{fill:var(--green-mini)}
.brand-logo .word{fill:var(--color-ivory)}
.brand-logo .sub{fill:var(--color-gold)}
@media (max-width:47.99rem){.brand .brand-logo{height:36px}}

/* "Contact us" dialog and the fixed To row */
.to-row{display:flex;align-items:center;gap:.9rem;min-height:3rem;padding:.6rem .95rem;border:1px solid rgb(204 174 112 / .3);border-radius:8px;background:rgb(204 174 112 / .07)}
.to-row .to-l{font-size:.95rem;font-weight:400;color:var(--color-gold)}
.to-row .to-v{font-weight:400;color:var(--color-ivory)}
.inq-dialog{width:min(46rem,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:hidden;
  border:1px solid rgb(204 174 112 / .3);border-radius:16px;color:var(--color-ivory);
  background:radial-gradient(700px 400px at 80% 0%,rgba(46,105,83,.22),transparent 60%),linear-gradient(160deg,#13284C 0%,#0F1E3A 55%,#091428 100%);
  box-shadow:0 30px 90px rgb(0 0 0 / .55)}
.inq-dialog::backdrop{background:rgb(4 9 20 / .72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.inq-dialog[open]{animation:rise .45s var(--ease-out-expo) both}
.inq-body{position:relative;max-height:calc(100dvh - 34px);overflow:auto;padding:clamp(1.25rem,4vw,2.25rem);overscroll-behavior:contain}
.inq-close{position:absolute;top:.9rem;inset-inline-end:.9rem;z-index:1;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid var(--hair-dark);background:rgb(9 20 40 / .6);color:var(--color-ivory);cursor:pointer}
.inq-close:hover{border-color:var(--color-gold);color:var(--color-gold)}
.inq-dialog .inquiry-form h2{padding-inline-end:3rem}
html:has(.inq-dialog[open]){overflow:hidden}
.foot-contact{display:inline-flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none}
.foot-contact .ico{width:1.1rem;height:1.1rem}
.foot-contact:hover{color:var(--color-gold-hi)}