/* =========================================================
   مهراز بنا — MEHRAZ BANA
   Architecture & Construction — Landing Page
   ---------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Utilities (shell, head, eyebrow, rule, buttons, chamfer)
   4.  Loader & cursor
   5.  Header / nav / drawer
   6.  Hero
   7.  Diamond mosaic band
   8.  Projects gallery
   9.  Services
   10. About
   11. Styles
   12. Process
   13. CTA
   14. Footer
   15. Reveal / animation engine
   16. Responsive
   ========================================================= */

/* ============ 1. TOKENS ============ */
:root{
  /* palette */
  --cream:      #F3EFE7;
  --cream-2:    #E9E2D6;
  --cream-3:    #FBF9F5;
  --ink:        #151515;
  --ink-2:      #0D0D0D;
  --gold:       #B49A68;
  --gold-2:     #C7AD78;
  --gold-soft:  rgba(180,154,104,.28);
  --gold-hair:  rgba(180,154,104,.42);
  --text:       #272522;
  --muted:      rgba(39,37,34,.62);
  --muted-2:    rgba(39,37,34,.44);
  --on-dark:    rgba(243,239,231,.78);
  --on-dark-2:  rgba(243,239,231,.46);

  /* type */
  --fa: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --en: "Cormorant Garamond", "Vazirmatn", "Times New Roman", serif;

  /* metrics */
  --shell: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --sec-y: clamp(72px, 9vw, 148px);
  --chamfer: clamp(18px, 2.4vw, 40px);
  --r: 2px;

  /* motion */
  --e-out: cubic-bezier(.16,.84,.34,1);
  --e-soft: cubic-bezier(.25,.8,.28,1);
  --t: .55s var(--e-out);
}

/* ============ 2. RESET & BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  font-family:var(--fa);
  font-weight:400;
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:2;
  color:var(--text);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; }

h1,h2,h3,h4,h5{ margin:0; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

svg{ display:block; }
[class*="__icon"] svg,
[class*="__arrow"] svg,
.contacts__ic svg,
.srow__icon svg,
.card__icon svg{
  fill:none; stroke:currentColor; stroke-width:1.35;
  stroke-linecap:round; stroke-linejoin:round;
}

::selection{ background:var(--gold); color:var(--cream-3); }

:focus-visible{
  outline:2px solid var(--gold-2);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed; top:-100px; inset-inline-start:20px; z-index:400;
  background:var(--ink); color:var(--cream); padding:12px 22px;
  font-size:14px; transition:top .3s;
}
.skip-link:focus{ top:20px; }

/* ============ 3. UTILITIES ============ */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--sec-y); position:relative; }

/* -- section head -- */
.head{ text-align:center; margin-bottom:clamp(40px,5vw,72px); }
.head--start{ text-align:start; margin-bottom:26px; }

.head__title{
  font-size:clamp(30px,4.2vw,58px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.25;
}
.head__sub{
  margin-top:12px;
  font-family:var(--fa);
  font-size:clamp(15.5px,1.35vw,19px);
  font-weight:400;
  color:var(--gold);
  letter-spacing:0;
}
.head--light .head__title{ color:var(--cream-3); }
.head--light .head__sub{ color:var(--gold-2); }

/* -- eyebrow -- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--en);
  font-size:13px; font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.eyebrow i{
  width:38px; height:1px; background:var(--gold);
  display:block; opacity:.7;
}
.eyebrow--fa{
  font-family:var(--fa); font-size:13.5px; font-weight:500;
  letter-spacing:0; text-transform:none;
}
.eyebrow--gold{ color:var(--gold-2); }
.eyebrow--gold i{ background:var(--gold-2); }
.head .eyebrow{ justify-content:center; }

/* -- thin gold rule -- */
.rule{
  display:block; height:1px; width:min(100%,300px);
  background:linear-gradient(to left,var(--gold),transparent);
  margin-block:26px;
  transform-origin:right center;
}

/* -- chamfered corner shape (the poster's diagonal geometry) -- */
.chamfer{
  clip-path:polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer));
}

/* -- buttons -- */
.btn{
  --bh: 58px;
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  height:var(--bh); padding-inline:30px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background .4s var(--e-soft), color .4s var(--e-soft),
             border-color .4s var(--e-soft), transform .35s var(--e-out);
  will-change:transform;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.btn span{ position:relative; z-index:2; }
.btn__arrow{ width:19px; height:19px; transition:transform .45s var(--e-out); }
.btn:hover .btn__arrow{ transform:translateX(-6px); }

.btn--dark{ background:var(--ink); color:var(--cream); }
.btn--dark:hover{ background:var(--gold); color:var(--ink-2); }

.btn--ghost{ border-color:rgba(39,37,34,.28); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); background:rgba(180,154,104,.07); }

.btn--gold{ background:var(--gold-2); color:var(--ink-2); }
.btn--gold:hover{ background:var(--cream-3); }

.btn--line{ border-color:rgba(243,239,231,.3); color:var(--cream); }
.btn--line:hover{ border-color:var(--gold-2); color:var(--gold-2); }

/* -- dark stone surface (marble texture, very subtle) -- */
.stone{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(180,154,104,.10), transparent 60%),
    linear-gradient(160deg, #1b1b1b, var(--ink-2) 55%, #101010);
}

/* ============ 4. LOADER & CURSOR ============ */
.loader{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:var(--ink-2);
  transition:opacity .7s var(--e-soft), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }

.loader__inner{ display:grid; justify-items:center; gap:20px; }
.loader__mark{ width:74px; height:74px; fill:none; stroke:var(--gold-2); stroke-width:1.3; }
.loader__dia,.loader__bld{
  stroke-dasharray:200; stroke-dashoffset:200;
  animation:draw 1.5s var(--e-out) forwards;
}
.loader__bld{ animation-delay:.28s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.loader__word{
  font-family:var(--en); font-size:15px; letter-spacing:.5em;
  color:var(--gold-2); padding-inline-start:.5em;
}
.loader__bar{
  display:block; width:150px; height:1px; background:rgba(199,173,120,.22);
  overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0; background:var(--gold-2);
  animation:bar 1.25s var(--e-soft) forwards;
}
@keyframes bar{ to{ width:100%; } }

/* -- custom cursor (desktop only, enabled via JS) -- */
.cursor{ display:none; }
body.has-cursor .cursor{
  display:block; position:fixed; top:0; left:0;
  z-index:250; pointer-events:none;
}
.cursor__dot,.cursor__ring{
  position:absolute; top:0; left:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.cursor__dot{
  width:6px; height:6px; background:var(--gold);
  transition:opacity .3s, width .3s, height .3s;
}
.cursor__ring{
  width:36px; height:36px;
  border:1px solid var(--gold-hair);
  display:grid; place-items:center;
  transition:width .45s var(--e-out), height .45s var(--e-out),
             background .45s var(--e-out), border-color .45s var(--e-out);
}
.cursor__label{
  font-family:var(--en); font-size:12px; letter-spacing:.22em;
  color:var(--ink-2); opacity:0; transform:scale(.8);
  transition:opacity .3s, transform .35s var(--e-out);
  padding-inline-start:.22em;
}
.cursor.is-view .cursor__ring{
  width:92px; height:92px;
  background:var(--gold-2); border-color:transparent;
}
.cursor.is-view .cursor__label{ opacity:1; transform:scale(1); }
.cursor.is-view .cursor__dot{ opacity:0; }
.cursor.is-hover .cursor__ring{ width:56px; height:56px; border-color:var(--gold); }

/* ============ 5. HEADER ============ */
.header{
  position:fixed; inset-inline:0; top:0; z-index:200;
  transition:background .45s var(--e-soft), box-shadow .45s var(--e-soft),
             backdrop-filter .45s;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px;
  height:112px;
  transition:height .45s var(--e-soft);
}
.header.is-stuck{
  background:rgba(243,239,231,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--gold-soft), 0 14px 40px -28px rgba(21,21,21,.5);
}
.header.is-stuck .header__inner{ height:78px; }
.header.is-hidden{ transform:translateY(-100%); }
.header{ transition:transform .5s var(--e-soft), background .45s var(--e-soft), box-shadow .45s var(--e-soft); }

/* -- logo -- */
.logo{ display:flex; align-items:center; gap:14px; }
.logo__mark{
  flex:none; width:46px; height:46px;
  transition:width .45s var(--e-soft), height .45s var(--e-soft);
}
.logo__mark svg{ width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
.header.is-stuck .logo__mark{ width:40px; height:40px; }
.logo:hover .l-dia{ transform-origin:center; animation:spin 1.1s var(--e-soft); }
@keyframes spin{ to{ transform:rotate(90deg); } }

.logo__type{ display:grid; gap:1px; line-height:1.25; }
.logo__fa{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
.logo__en{
  font-family:var(--en); font-style:normal; font-size:12px; font-weight:600;
  letter-spacing:.3em; color:var(--gold); padding-inline-start:.3em;
}
.logo__sub{
  font-family:var(--en); font-style:normal; font-size:8.6px; font-weight:500;
  letter-spacing:.26em; color:var(--muted-2); padding-inline-start:.26em;
}

/* -- nav -- */
.nav__list{ display:flex; align-items:center; gap:clamp(14px,2vw,34px); }
.nav__link{
  position:relative; font-size:15px; font-weight:500;
  color:var(--text); opacity:.78;
  transition:opacity .3s, color .3s;
  padding-block:6px;
}
.nav__link::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right center;
  transition:transform .45s var(--e-out);
}
.nav__link:hover,.nav__link.is-active{ opacity:1; color:var(--gold); }
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); }

/* -- burger -- */
.burger{
  display:none; width:46px; height:46px;
  place-items:center; gap:6px; flex-direction:column;
  border:1px solid var(--gold-soft);
}
.burger span{
  display:block; width:20px; height:1.4px; background:var(--text);
  transition:transform .4s var(--e-out), opacity .3s;
}
.burger.is-open span:nth-child(1){ transform:translateY(3.7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.7px) rotate(-45deg); }

/* header adapts to the dark drawer while it is open */
body.is-locked .header{ background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
body.is-locked .logo__fa{ color:var(--cream-3); }
body.is-locked .logo__sub{ color:var(--on-dark-2); }
body.is-locked .burger{ border-color:rgba(199,173,120,.42); }
body.is-locked .burger span{ background:var(--cream-3); }

/* -- drawer -- */
.drawer{
  position:fixed; inset:0; z-index:190;
  background:var(--ink-2);
  display:grid; align-content:center;
  padding:110px var(--gutter) 40px;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--e-soft), visibility .5s;
}
.drawer[hidden]{ display:grid; }
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer__nav{ display:grid; gap:4px; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:16px;
  font-size:clamp(26px,7vw,38px); font-weight:700;
  color:var(--cream); padding-block:14px;
  border-bottom:1px solid rgba(199,173,120,.16);
  opacity:0; transform:translateY(22px);
  transition:color .3s;
}
.drawer.is-open .drawer__nav a{
  animation:drawerIn .6s var(--e-out) forwards;
}
.drawer__nav a:nth-child(1){ animation-delay:.10s; }
.drawer__nav a:nth-child(2){ animation-delay:.16s; }
.drawer__nav a:nth-child(3){ animation-delay:.22s; }
.drawer__nav a:nth-child(4){ animation-delay:.28s; }
.drawer__nav a:nth-child(5){ animation-delay:.34s; }
.drawer__nav a:nth-child(6){ animation-delay:.40s; }
@keyframes drawerIn{ to{ opacity:1; transform:none; } }
.drawer__nav a:hover{ color:var(--gold-2); }
.drawer__nav em{
  font-family:var(--en); font-style:normal; font-size:14px;
  color:var(--gold); letter-spacing:.12em;
}
.drawer__foot{
  margin-top:44px; display:grid; gap:6px;
  font-family:var(--en); letter-spacing:.34em; font-size:11px;
  color:var(--on-dark-2);
}

/* ============ 6. HERO ============ */
.hero{
  position:relative;
  padding-top:clamp(140px,15vw,196px);
  padding-bottom:clamp(70px,8vw,120px);
  background:
    linear-gradient(180deg,var(--cream-3),var(--cream) 42%,var(--cream-2));
  overflow:hidden;
}
.hero__glow{
  position:absolute; inset-inline-end:-14%; top:-18%;
  width:62vw; height:62vw; max-width:920px; max-height:920px;
  background:radial-gradient(circle at 50% 50%, rgba(180,154,104,.20), transparent 62%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:linear-gradient(to left,transparent,var(--gold-hair) 20%,var(--gold-hair) 80%,transparent);
}

.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:1.14fr 1fr;
  gap:clamp(36px,4.4vw,76px);
  align-items:center;
}

.hero__title{ margin-top:6px; }
.hero__title span{
  display:block;
  font-size:clamp(38px,5.4vw,70px);
  font-weight:800; letter-spacing:-.035em; line-height:1.14;
}
.hero__title em{
  display:block; margin-top:.16em;
  font-style:normal;
  font-size:clamp(25px,3.1vw,44px);
  font-weight:500;
  color:var(--gold);
  letter-spacing:-.02em;
}

.hero__lead{
  font-size:clamp(15.5px,1.2vw,18px);
  font-weight:500;
  max-width:46ch;
}
.hero__text{
  margin-top:14px;
  color:var(--muted);
  max-width:46ch;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,46px);
  margin-top:46px; padding-top:26px;
  border-top:1px solid var(--gold-soft);
}
.hero__meta li{ display:grid; gap:0; }
.hero__meta b{
  font-family:var(--en); font-size:clamp(26px,2.6vw,36px);
  font-weight:600; color:var(--text); line-height:1.1;
  direction:ltr; unicode-bidi:isolate;
}
.hero__meta span{ font-size:13px; color:var(--muted-2); }

/* -- hero figure -- */
.hero__figure{ position:relative; margin:0; }

.hero__frame{
  position:absolute;
  inset-block:clamp(22px,2.6vw,38px);
  inset-inline-end:calc(-1 * clamp(16px,2vw,32px));
  inset-inline-start:clamp(38px,5vw,74px);
  background:var(--gold);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  opacity:.55;
}
.hero__frame::after{
  content:""; position:absolute; inset:1px;
  background:var(--cream);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
}

.hero__media{
  position:relative;
  aspect-ratio:4/5;
  max-height:min(680px,70vh);
  overflow:hidden;
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  box-shadow:0 50px 90px -50px rgba(21,21,21,.6);
  transform:translate3d(0,0,0);
  transition:transform .9s var(--e-soft);
}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.4s var(--e-soft);
  will-change:transform;
}
.hero__media:hover img{ transform:scale(1.11); }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(200deg, rgba(180,154,104,.16), transparent 42%),
    linear-gradient(0deg, rgba(13,13,13,.5), transparent 55%);
  pointer-events:none;
}

.hero__cap{
  position:absolute; inset-inline-end:clamp(18px,2.4vw,34px);
  bottom:clamp(20px,2.6vw,34px);
  display:grid; gap:2px; text-align:end;
  color:var(--cream-3);
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.hero__cap b{
  font-family:var(--en); font-size:clamp(20px,2vw,28px);
  font-weight:600; letter-spacing:.04em;
}
.hero__cap span{ font-size:12.5px; color:rgba(243,239,231,.72); }

/* -- scroll cue -- */
.hero__scroll{
  position:absolute; inset-inline-start:var(--gutter); bottom:clamp(24px,3vw,44px);
  display:grid; justify-items:center; gap:10px;
  font-family:var(--en); font-size:11px; letter-spacing:.34em;
  color:var(--muted-2);
  writing-mode:vertical-lr;
}
.hero__scroll span{ padding-block-start:.34em; }
.hero__scroll i{
  width:1px; height:56px; background:var(--gold-soft); position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset-inline:0; top:-56px; height:56px;
  background:var(--gold);
  animation:cue 2.4s var(--e-soft) infinite;
}
@keyframes cue{ 0%{ transform:translateY(0);} 60%,100%{ transform:translateY(112px);} }

/* ============ 7. DIAMOND MOSAIC BAND ============ */
.mosaic{
  position:relative;
  height:clamp(300px,38vw,480px);
  overflow:hidden;
  background:
    radial-gradient(90% 120% at 50% 50%, #1d1d1d, var(--ink-2));
  border-block:1px solid rgba(180,154,104,.3);
}
.mosaic__grid{
  position:absolute; top:50%; left:50%;
  display:grid;
  gap:2px;
  transform:translate(-50%,-50%) rotate(45deg);
  will-change:transform;
}
.mosaic__cell{
  background-size:cover; background-position:center;
  position:relative;
  filter:grayscale(.30) brightness(.66) contrast(1.06);
  transition:filter .8s var(--e-soft), transform .8s var(--e-soft);
}
.mosaic__cell::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(199,173,120,.46);
}
.mosaic__cell:hover{ filter:none; transform:scale(1.03); z-index:2; }

.mosaic__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(110% 80% at 50% 45%, transparent 18%, rgba(13,13,13,.9) 92%),
    linear-gradient(90deg, var(--ink-2), transparent 26%, transparent 74%, var(--ink-2)),
    linear-gradient(0deg, rgba(13,13,13,.92), transparent 46%);
}
.mosaic__caption{
  position:absolute; inset-inline:0; bottom:clamp(20px,3vw,34px);
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-family:var(--en); font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.36em; color:var(--gold-2);
  pointer-events:none;
  text-shadow:0 2px 18px rgba(13,13,13,.9);
}
.mosaic__caption i{ width:clamp(30px,6vw,90px); height:1px; background:var(--gold-soft); }

/* ============ 8. PROJECTS ============ */
.projects{ background:var(--cream); }

.gallery{
  /* row unit is derived from the column width, so every tile keeps
     the same proportions at any viewport size */
  --gap: clamp(12px,1.4vw,22px);
  --gw: min(calc(100vw - 2 * var(--gutter) - 10px), calc(var(--shell) - 2 * var(--gutter)));
  --col: calc((var(--gw) - 5 * var(--gap)) / 6);
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:calc(var(--col) * .83);
  grid-auto-flow:row dense;
  gap:var(--gap);
}

.tile{
  position:relative;
  grid-column:span 2;
  grid-row:span 2;
  overflow:hidden;
  background:var(--cream-2);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  isolation:isolate;
}
.tile--wide{ grid-column:span 4; grid-row:span 3; }
.tile--tall{ grid-column:span 2; grid-row:span 3; }

.tile__img{ position:absolute; inset:0; overflow:hidden; }
.tile__img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.01);
  transition:transform 1.1s var(--e-soft), filter .8s var(--e-soft);
  filter:saturate(.94);
  will-change:transform;
}
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,13,13,.82) 0%, rgba(13,13,13,.28) 34%, transparent 62%);
  opacity:0; transition:opacity .6s var(--e-soft);
  pointer-events:none;
}
.tile:hover .tile__img img,
.tile:focus-visible .tile__img img{ transform:scale(1.09); filter:saturate(1.02); }
.tile:hover::after,
.tile:focus-visible::after{ opacity:1; }

.tile__body{
  position:absolute; inset-inline-end:clamp(18px,2vw,30px);
  bottom:clamp(18px,2vw,28px);
  z-index:2; text-align:end;
  display:grid; gap:3px;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--e-out), transform .55s var(--e-out);
}
.tile__body b{
  font-family:var(--en); font-size:clamp(19px,1.8vw,27px);
  font-weight:600; letter-spacing:.03em; color:var(--cream-3);
}
.tile__body span{ font-size:13px; color:var(--gold-2); }

.tile__arrow{
  position:absolute; inset-inline-start:clamp(18px,2vw,28px);
  bottom:clamp(20px,2vw,30px);
  width:38px; height:38px; z-index:2; color:var(--gold-2);
  opacity:0; transform:translateX(14px);
  transition:opacity .55s var(--e-out) .06s, transform .55s var(--e-out) .06s;
}
.tile:hover .tile__body, .tile:focus-visible .tile__body,
.tile:hover .tile__arrow, .tile:focus-visible .tile__arrow{
  opacity:1; transform:none;
}

/* thin gold hairline frame appearing on hover */
.tile__img::after{
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(199,173,120,.5);
  opacity:0; transform:scale(1.02);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
  pointer-events:none; z-index:1;
}
.tile:hover .tile__img::after,
.tile:focus-visible .tile__img::after{ opacity:1; transform:none; }

/* ============ 9. SERVICES ============ */
.services{ background:linear-gradient(180deg,var(--cream-2),var(--cream)); }
.services::before{
  content:""; position:absolute; inset-inline:0; top:0; height:1px;
  background:linear-gradient(to left,transparent,var(--gold-hair),transparent);
}

.cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.1vw,16px);
}

.card{
  position:relative;
  padding:clamp(26px,2.4vw,36px) clamp(22px,2vw,30px) clamp(60px,5vw,74px);
  background:rgba(251,249,245,.6);
  border:1px solid rgba(180,154,104,.2);
  overflow:hidden;
  transition:transform .55s var(--e-out), background .55s var(--e-soft),
             border-color .55s var(--e-soft), box-shadow .55s var(--e-soft);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.card::before{
  content:""; position:absolute; inset-inline:0; top:0; height:2px;
  background:linear-gradient(to left,var(--gold-2),var(--gold));
  transform:scaleX(0); transform-origin:right center;
  transition:transform .6s var(--e-out);
}
.card:hover{
  transform:translateY(-10px);
  background:var(--cream-3);
  border-color:rgba(180,154,104,.42);
  box-shadow:0 40px 60px -46px rgba(21,21,21,.55);
}
.card:hover::before{ transform:scaleX(1); }

.card__num{
  position:absolute; inset-inline-start:14px; top:2px;
  font-family:var(--en); font-size:clamp(64px,6vw,92px);
  font-weight:600; line-height:1;
  color:rgba(180,154,104,.17);
  transition:color .6s var(--e-soft), transform .6s var(--e-out);
  pointer-events:none;
}
.card:hover .card__num{ color:rgba(180,154,104,.22); transform:translateY(-4px); }

.card__icon{
  display:block; width:44px; height:44px; color:var(--gold);
  margin-bottom:22px;
  transition:transform .6s var(--e-out), color .5s;
}
.card__icon svg{ width:100%; height:100%; }
.card:hover .card__icon{ transform:translateY(-4px) rotate(-3deg); }

.card__title{ font-size:clamp(18px,1.5vw,21px); font-weight:700; }
.card__text{
  margin-top:10px; font-size:14.4px; line-height:1.95;
  color:var(--muted);
}

.card__arrow{
  position:absolute; inset-inline-start:clamp(22px,2vw,30px);
  bottom:clamp(22px,2vw,30px);
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid rgba(180,154,104,.32);
  color:var(--gold);
  border-radius:50%;
  transition:background .45s var(--e-soft), color .45s, border-color .45s, transform .45s var(--e-out);
}
.card__arrow svg{ width:16px; height:16px; }
.card:hover .card__arrow{
  background:var(--gold); color:var(--cream-3);
  border-color:var(--gold); transform:translateX(-4px);
}

/* ============ 10. ABOUT ============ */
.about{ background:var(--cream); }
.about__grid{
  display:grid;
  grid-template-columns:1.06fr 1fr;
  gap:clamp(38px,5vw,84px);
  align-items:center;
}

.about__copy{ order:1; }
.about__figure{ position:relative; margin:0; order:2; }
.about__frame{
  position:absolute;
  inset-block:clamp(20px,2.4vw,34px);
  inset-inline-end:calc(-1 * clamp(16px,2vw,30px));
  inset-inline-start:clamp(34px,4.4vw,66px);
  background:var(--gold); opacity:.5;
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
}
.about__frame::after{
  content:""; position:absolute; inset:1px; background:var(--cream);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
}
.about__media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  box-shadow:0 44px 80px -52px rgba(21,21,21,.55);
}
.about__media img{
  width:100%; height:112%; object-fit:cover;
  transition:transform 1.2s var(--e-soft);
  will-change:transform;
}
.about__media:hover img{ transform:scale(1.05); }

.about__badge{
  position:absolute; inset-inline-start:clamp(-10px,-1vw,0px);
  top:clamp(-14px,-1.4vw,-6px);
  width:clamp(78px,7vw,98px); aspect-ratio:1;
  display:grid; place-content:center; gap:2px; text-align:center;
  background:var(--ink); color:var(--gold-2);
  transform:rotate(45deg);
  box-shadow:0 20px 40px -26px rgba(21,21,21,.7);
}
.about__badge b,.about__badge i{
  transform:rotate(-45deg); font-style:normal; font-family:var(--en);
  display:block; letter-spacing:.16em;
}
.about__badge b{ font-size:11px; opacity:.7; }
.about__badge i{ font-size:19px; font-weight:600; }

.about__quote{
  font-size:clamp(19px,1.9vw,26px);
  font-weight:600; line-height:1.85;
  letter-spacing:-.015em;
  padding-inline-end:22px;
  border-inline-end:2px solid var(--gold);
  margin-block:8px 22px;
}
.about__text{ color:var(--muted); max-width:52ch; }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px);
  margin-block:38px 34px;
  padding-block:28px;
  border-block:1px solid var(--gold-soft);
}
.stats li{ display:grid; gap:2px; }
.stats b{
  font-family:var(--en);
  font-size:clamp(36px,4vw,54px); font-weight:600; line-height:1;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate;
}
.stats span{ font-size:13.5px; color:var(--muted); }

/* ============ 11. STYLES ============ */
.styles{
  position:relative;
  background:var(--ink-2);
  overflow:hidden;
  padding-block:clamp(76px,9vw,140px);
}
.styles__bg{ position:absolute; inset:0; }
.styles__layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08);
  filter:grayscale(.25);
  transition:opacity 1s var(--e-soft), transform 1.6s var(--e-soft);
}
.styles__layer.is-on{ opacity:1; transform:scale(1); }
.styles__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(13,13,13,.96), rgba(13,13,13,.82) 55%, rgba(13,13,13,.94)),
    linear-gradient(0deg, rgba(13,13,13,.93), rgba(13,13,13,.72));
}
.styles__inner{ position:relative; }

.styles__list{ display:grid; }
.srow{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(150px,190px) 110px 1fr auto;
  grid-template-areas:"icon title en desc arrow";
  align-items:center;
  gap:clamp(14px,2vw,28px);
  padding-block:clamp(20px,2.2vw,30px);
  border-top:1px solid rgba(199,173,120,.2);
  cursor:pointer;
  transition:padding-inline .55s var(--e-out), background .55s var(--e-soft);
}
.srow:last-child{ border-bottom:1px solid rgba(199,173,120,.2); }
.srow::before{
  content:""; position:absolute; inset-inline:0; top:-1px; height:1px;
  background:var(--gold-2); transform:scaleX(0); transform-origin:right center;
  transition:transform .7s var(--e-out);
}
.srow.is-on::before{ transform:scaleX(1); }
.srow.is-on{ padding-inline:clamp(8px,1.4vw,20px); background:rgba(199,173,120,.05); }

.srow__icon{
  grid-area:icon;
  width:clamp(38px,3.4vw,50px); height:clamp(38px,3.4vw,50px);
  color:var(--gold); opacity:.55;
  transition:opacity .5s, transform .6s var(--e-out), color .5s;
}
.srow__icon svg{ width:100%; height:100%; }
.srow.is-on .srow__icon{ opacity:1; transform:translateY(-3px); color:var(--gold-2); }

.srow__title{
  grid-area:title;
  font-size:clamp(22px,2.8vw,38px); font-weight:700;
  color:rgba(243,239,231,.62); letter-spacing:-.02em;
  transition:color .5s var(--e-soft);
}
.srow.is-on .srow__title{ color:var(--cream-3); }

.srow__en{
  grid-area:en;
  font-family:var(--en); font-size:13px; letter-spacing:.26em;
  color:var(--gold); opacity:.6; transition:opacity .5s;
}
.srow.is-on .srow__en{ opacity:1; }

.srow__desc{
  grid-area:desc;
  font-size:14.5px; line-height:1.9; color:var(--on-dark-2);
  max-width:48ch;
  transition:color .5s;
}
.srow.is-on .srow__desc{ color:var(--on-dark); }

.srow__arrow{
  grid-area:arrow;
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid rgba(199,173,120,.3); border-radius:50%;
  color:var(--gold-2);
  opacity:0; transform:translateX(12px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), background .4s;
}
.srow__arrow svg{ width:17px; height:17px; }
.srow.is-on .srow__arrow{ opacity:1; transform:none; }
.srow.is-on .srow__arrow:hover{ background:var(--gold-2); color:var(--ink-2); }

/* ============ 12. PROCESS ============ */
.process{ background:linear-gradient(180deg,var(--cream),var(--cream-2)); }

.steps{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,30px);
  padding-top:56px;
}
.steps__track{
  position:absolute; inset-inline:6%; top:8px; height:1px;
  background:var(--gold-soft);
}
.steps__track i{
  display:block; height:100%; width:0;
  background:linear-gradient(to left,var(--gold-2),var(--gold));
  transition:width 1.1s var(--e-soft);
}
.steps__track::after{
  content:""; position:absolute; inset-inline:0; top:0; height:1px;
}

.step{ position:relative; padding-inline-end:12px; }
.step__dot{
  position:absolute; top:-56px; inset-inline-start:50%;
  width:11px; height:11px;
  transform:translateX(50%) rotate(45deg);
  background:var(--cream-2);
  border:1px solid var(--gold);
  transition:background .5s var(--e-soft), transform .6s var(--e-out), box-shadow .5s;
}
.step.is-on .step__dot{
  background:var(--gold);
  transform:translateX(50%) rotate(45deg) scale(1.35);
  box-shadow:0 0 0 6px rgba(180,154,104,.14);
}
.step__num{
  display:block;
  font-family:var(--en); font-size:clamp(30px,3vw,44px);
  font-weight:600; line-height:1;
  color:rgba(180,154,104,.34);
  transition:color .5s var(--e-soft);
}
.step.is-on .step__num{ color:var(--gold); }
.step__title{ margin-top:12px; font-size:clamp(17px,1.5vw,21px); font-weight:700; }
.step__text{ margin-top:8px; font-size:14.4px; line-height:1.95; color:var(--muted); max-width:30ch; }

/* ============ 13. CTA ============ */
.cta{
  position:relative;
  padding-block:clamp(90px,11vw,160px);
  overflow:hidden;
  background:var(--ink-2);
  text-align:center;
  isolation:isolate;
}
.cta__bg{
  position:absolute; inset:0;
  background:url("assets/images/cta-night.jpg") center/cover no-repeat;
  opacity:.34;
  filter:grayscale(.3) contrast(1.05);
  transform:scale(1.06);
  will-change:transform;
}
.cta__marble{
  position:absolute; inset:0;
  background:url("assets/images/marble-dark.jpg") center/cover no-repeat;
  opacity:.28; mix-blend-mode:overlay;
}
.cta::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(70% 100% at 50% 50%, rgba(13,13,13,.55), rgba(13,13,13,.9)),
    radial-gradient(60% 60% at 50% 12%, rgba(180,154,104,.22), transparent 70%);
}
.cta__sweep{
  position:absolute; inset-inline:0; top:50%; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(199,173,120,.75),transparent);
  transform:translateY(-50%);
  animation:sweep 7s var(--e-soft) infinite;
  opacity:.55;
}
@keyframes sweep{
  0%{ transform:translateY(-50%) scaleX(0); opacity:0; }
  25%{ opacity:.7; }
  50%{ transform:translateY(-50%) scaleX(1); opacity:.35; }
  100%{ transform:translateY(-50%) scaleX(1); opacity:0; }
}
.cta__inner{ position:relative; z-index:3; display:grid; justify-items:center; }
.cta__title{
  font-size:clamp(30px,5.2vw,68px); font-weight:800;
  letter-spacing:-.035em; color:var(--cream-3);
  max-width:24ch; text-wrap:balance;
}
.cta__text{
  margin-top:16px; font-size:clamp(15px,1.3vw,18.5px);
  color:var(--on-dark); max-width:44ch;
}
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:40px; }

/* ============ 14. FOOTER ============ */
.footer{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  padding-block:clamp(56px,6vw,84px) 30px;
  overflow:hidden;
}
.footer::before{
  content:""; position:absolute; inset:0;
  background:url("assets/images/marble-dark.jpg") center/cover no-repeat;
  opacity:.16;
}
.footer::after{
  content:""; position:absolute; inset-inline:0; top:0; height:1px;
  background:linear-gradient(to left,transparent,var(--gold),transparent);
  opacity:.6;
}
.footer > .shell{ position:relative; }

.footer__top{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:clamp(34px,5vw,70px);
  padding-bottom:clamp(38px,4vw,58px);
}
.footer__brand{ display:grid; justify-items:start; gap:3px; }
.logo__mark--lg{ width:64px; height:64px; margin-bottom:14px; }
.logo__mark--lg svg{ stroke:var(--gold-2); }
.footer__fa{ font-size:clamp(24px,2.4vw,32px); font-weight:800; letter-spacing:-.02em; }
.footer__en{
  font-family:var(--en); font-style:normal; font-size:15px; font-weight:600;
  letter-spacing:.42em; color:var(--gold-2); padding-inline-start:.42em;
}
.footer__sub{
  font-family:var(--en); font-style:normal; font-size:10.5px; font-weight:500;
  letter-spacing:.32em; color:var(--on-dark-2); padding-inline-start:.32em;
}
.footer__motto{
  margin-top:20px; font-size:clamp(15px,1.4vw,19px);
  color:var(--gold-2); font-weight:500;
  position:relative; padding-inline-start:44px;
}
.footer__motto::before{
  content:""; position:absolute; inset-inline-start:0; top:50%;
  width:32px; height:1px; background:var(--gold-soft);
}

.footer__nav{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; align-content:start; }
.footer__nav h4{
  font-size:13px; letter-spacing:.14em; color:var(--gold-2);
  margin-bottom:14px; font-weight:600;
}
.footer__nav a{
  display:block; font-size:14.5px; color:var(--on-dark);
  padding-block:5px; transition:color .3s, transform .35s var(--e-out);
}
.footer__nav a:hover{ color:var(--gold-2); transform:translateX(-5px); }

/* -- contacts row with dotted gold rule (poster homage) -- */
.contacts{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.4vw,34px);
  padding-block:clamp(30px,3.4vw,44px);
  border-top:1px dashed rgba(199,173,120,.28);
  border-bottom:1px dashed rgba(199,173,120,.28);
}
.contacts li{ display:flex; gap:14px; align-items:flex-start; }
.contacts__ic{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(199,173,120,.4);
  color:var(--gold-2);
  transition:background .45s var(--e-soft), color .45s, transform .5s var(--e-out);
}
.contacts__ic svg{ width:19px; height:19px; }
.contacts li:hover .contacts__ic{
  background:var(--gold-2); color:var(--ink-2); transform:translateY(-3px);
}
.contacts h5{
  font-size:12.5px; font-weight:600; color:var(--gold-2);
  letter-spacing:.06em; margin-bottom:4px;
}
.contacts a,.contacts p{
  display:block; font-size:14px; line-height:1.85;
  color:var(--on-dark); transition:color .3s;
}
.contacts a:hover{ color:var(--gold-2); }

.footer__bar{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; align-items:center;
  padding-top:24px;
  font-size:12.6px; color:var(--on-dark-2);
}
.footer__made{ font-family:var(--en); letter-spacing:.16em; }

/* -- to top -- */
.totop{
  position:fixed; inset-inline-start:26px; bottom:26px; z-index:180;
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--ink); color:var(--gold-2);
  border:1px solid rgba(199,173,120,.35);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .45s, visibility .45s, transform .45s var(--e-out), background .4s;
}
.totop svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--gold-2); color:var(--ink-2); }

/* ============ 15. REVEAL / ANIMATION ENGINE ============ */
.reveal{
  opacity:0;
  transform:translateY(52px);
  transition:opacity .95s var(--e-out), transform .95s var(--e-out);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* page-load sequence */
.ld{
  opacity:0;
  transform:translateY(30px);
}
body.is-ready .ld{
  animation:ldIn 1.1s var(--e-out) forwards;
  animation-delay:calc(var(--ld-i,0) * 90ms + 120ms);
}
@keyframes ldIn{ to{ opacity:1; transform:none; } }

body.is-ready .rule.ld{
  animation:ruleIn 1.2s var(--e-out) forwards;
  animation-delay:calc(var(--ld-i,0) * 90ms + 120ms);
}
@keyframes ruleIn{
  from{ opacity:0; transform:scaleX(0); }
  to{ opacity:1; transform:scaleX(1); }
}

body.is-ready .hero__figure.ld .hero__media img{
  animation:heroImg 1.8s var(--e-soft) forwards;
}
@keyframes heroImg{
  from{ transform:scale(1.12); }
  to{ transform:scale(1.04); }
}

/* ============ 16. RESPONSIVE ============ */

/* wide-ish desktop */
@media (max-width:1280px){
  /* three across, with the last two centred underneath */
  .cards{ grid-template-columns:repeat(6,1fr); }
  .card{ grid-column:span 2; }
  .card:nth-child(4){ grid-column:2 / span 2; }
}

@media (max-width:1180px){
  .srow{
    grid-template-columns:auto minmax(130px,1fr) auto auto;
    grid-template-areas:"icon title en arrow";
  }
  .srow__desc{ display:none; }
}

/* tablet */
@media (max-width:960px){
  html{ scroll-padding-top:78px; }
  .header__inner{ height:84px; }
  .header.is-stuck .header__inner{ height:70px; }
  .nav{ display:none; }
  .burger{ display:flex; }

  .hero{ padding-top:120px; }
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .hero__copy{ order:1; }
  .hero__figure{ order:2; max-width:640px; }
  .hero__scroll{ display:none; }
  .hero__title span{ font-size:clamp(34px,8vw,54px); }

  .gallery{ grid-template-columns:repeat(4,1fr); grid-auto-rows:auto; }
  .tile,.tile--tall{ grid-column:span 2; grid-row:auto; aspect-ratio:1/1; }
  .tile--wide{ grid-column:span 4; grid-row:auto; aspect-ratio:16/9; }

  .about__grid{ grid-template-columns:1fr; gap:40px; }
  .about__figure{ max-width:560px; order:1; }
  .about__copy{ order:2; }

  .steps{ grid-template-columns:repeat(2,1fr); gap:38px 24px; padding-top:44px; }
  .steps__track{ display:none; }
  .step__dot{ position:static; display:block; margin-bottom:14px; transform:rotate(45deg); }
  .step.is-on .step__dot{ transform:rotate(45deg) scale(1.3); }

  .cards{ grid-template-columns:repeat(4,1fr); }
  .card{ grid-column:span 2; }
  .card:nth-child(4){ grid-column:span 2; }
  .card:nth-child(5){ grid-column:2 / span 2; }

  .footer__top{ grid-template-columns:1fr; }
  .contacts{ grid-template-columns:repeat(2,1fr); }
}

/* mobile */
@media (max-width:640px){
  :root{ --chamfer:16px; }
  body{ line-height:1.95; }

  .logo__sub{ display:none; }
  .logo__mark{ width:40px; height:40px; }

  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }
  .hero__meta{ gap:20px 26px; }

  .mosaic{ height:280px; }
  .mosaic__caption{ flex-direction:column; gap:6px; letter-spacing:.26em; }
  .mosaic__caption i{ width:64px; }

  .cards{ grid-template-columns:1fr; }
  .card,.card:nth-child(4),.card:nth-child(5){ grid-column:auto; }
  .card{ padding-bottom:64px; }

  .gallery{ grid-template-columns:1fr; gap:14px; grid-auto-rows:auto; }
  .tile,.tile--wide,.tile--tall{ grid-column:span 1; grid-row:auto; }
  .tile{ aspect-ratio:4/3; }
  .tile--tall{ aspect-ratio:4/5; }
  .tile--wide{ aspect-ratio:16/11; }
  /* tap = show info on touch devices */
  .tile__body,.tile__arrow{ opacity:1; transform:none; }
  .tile::after{ opacity:.78; }

  .srow{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "icon title arrow"
      "icon en    arrow";
    align-items:center;
    gap:2px 14px; padding-block:18px;
  }
  .srow__en{ align-self:start; }

  .stats{ grid-template-columns:1fr; gap:18px; text-align:start; }
  .stats li{ display:flex; align-items:baseline; gap:14px; }

  .steps{ grid-template-columns:1fr; gap:30px; }
  .step__text{ max-width:none; }

  .contacts{ grid-template-columns:1fr; gap:22px; }
  .footer__bar{ justify-content:center; text-align:center; }

  .totop{ inset-inline-start:16px; bottom:16px; width:44px; height:44px; }
}

/* touch / coarse pointers: no custom cursor, lighter motion */
@media (hover:none){
  .cursor{ display:none !important; }
  .tile__img::after{ opacity:1; }
}

/* motion sensitivity */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.ld{ opacity:1 !important; transform:none !important; }
  .loader{ display:none; }
}

/* print */
@media print{
  .header,.drawer,.cursor,.loader,.totop,.hero__scroll,.mosaic,
  .lightbox,.page-hero__scroll{ display:none !important; }
  body{ background:#fff; }
  .reveal,.ld{ opacity:1 !important; transform:none !important; }
}

/* =========================================================
   17. INNER PAGES — Portfolio & Admin
   ========================================================= */

/* -- shared page hero -- */
.page--portfolio .header:not(.is-stuck) .nav__link{
  color:rgba(243,239,231,.88);
  opacity:1;
}
.page--portfolio .header:not(.is-stuck) .nav__link:hover,
.page--portfolio .header:not(.is-stuck) .nav__link.is-active{
  color:var(--gold-2);
}
.page--portfolio .header:not(.is-stuck) .nav__link::after{ background:var(--gold-2); }
.page--portfolio .header:not(.is-stuck) .logo__fa{ color:var(--cream-3); }
.page--portfolio .header:not(.is-stuck) .logo__sub{ color:var(--on-dark-2); }
.page--portfolio .header:not(.is-stuck) .burger{
  border-color:rgba(199,173,120,.45);
}
.page--portfolio .header:not(.is-stuck) .burger span{ background:var(--cream-3); }

.footer--contacts .contacts{
  border-top:0;
  padding-top:0;
}
.footer--contacts{
  padding-top:clamp(40px,5vw,64px);
}

.page-hero{
  position:relative;
  min-height:min(72vh, 640px);
  display:grid;
  align-items:end;
  overflow:hidden;
  background:var(--ink-2);
}
.page-hero__media{
  position:absolute; inset:0;
}
.page-hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  animation:pageHeroZoom 12s var(--e-soft) forwards;
  filter:saturate(.88) brightness(.72);
}
@keyframes pageHeroZoom{
  to{ transform:scale(1); }
}
.page-hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.35) 40%, rgba(13,13,13,.88) 100%),
    radial-gradient(80% 60% at 70% 20%, rgba(180,154,104,.18), transparent 55%);
  pointer-events:none;
}
.page-hero__inner{
  position:relative;
  padding-block:clamp(120px,16vw,180px) clamp(56px,8vw,96px);
  color:var(--cream-3);
}
.page-hero__title{
  font-size:clamp(40px,7vw,84px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
  max-width:12ch;
}
.page-hero__text{
  margin-top:14px;
  max-width:38ch;
  font-size:clamp(15px,1.4vw,18px);
  color:var(--on-dark);
  line-height:1.9;
}
.page-hero .rule{
  background:linear-gradient(to left,var(--gold-2),transparent);
  margin-block:28px 0;
}
.page-hero__scroll{
  position:absolute;
  inset-inline-start:50%;
  bottom:28px;
  transform:translateX(-50%);
  width:28px; height:44px;
  border:1px solid rgba(199,173,120,.45);
  border-radius:20px;
  display:grid; place-items:start center;
  padding-top:8px;
}
.page-hero__scroll span{
  width:4px; height:8px;
  border-radius:4px;
  background:var(--gold-2);
  animation:scrollPulse 1.6s var(--e-soft) infinite;
}
@keyframes scrollPulse{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(14px); }
  100%{ opacity:0; transform:translateY(0); }
}

/* -- portfolio gallery -- */
.folio{ background:var(--cream); padding-top:clamp(48px,6vw,80px); }
.folio__toolbar{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:16px 24px;
  margin-bottom:clamp(28px,4vw,48px);
}
.folio__filters{
  display:flex; flex-wrap:wrap; gap:8px;
}
.folio__chip{
  position:relative;
  padding:10px 18px;
  font-size:14px; font-weight:500;
  color:var(--muted);
  border:1px solid rgba(180,154,104,.22);
  background:transparent;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:color .35s, border-color .35s, background .35s, transform .35s var(--e-out);
}
.folio__chip:hover{
  color:var(--gold); border-color:rgba(180,154,104,.5);
  transform:translateY(-2px);
}
.folio__chip.is-active{
  color:var(--ink-2);
  background:var(--gold-2);
  border-color:transparent;
}
.folio__count{
  font-family:var(--en);
  font-size:13px; letter-spacing:.22em;
  color:var(--gold);
}
.folio__grid{
  --gap: clamp(12px,1.4vw,22px);
  --gw: min(calc(100vw - 2 * var(--gutter) - 10px), calc(var(--shell) - 2 * var(--gutter)));
  --col: calc((var(--gw) - 5 * var(--gap)) / 6);
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:calc(var(--col) * .83);
  grid-auto-flow:row dense;
  gap:var(--gap);
}
.folio__tile{
  width:100%;
  padding:0;
  text-align:inherit;
  cursor:pointer;
  appearance:none;
}
.folio__tile.is-in{ opacity:1; transform:none; }

.folio__empty{
  text-align:center;
  padding:clamp(60px,10vw,120px) 20px;
  display:grid; justify-items:center; gap:14px;
}
.folio__empty[hidden]{ display:none; }
.folio__empty svg{
  width:64px; height:64px;
  fill:none; stroke:var(--gold); stroke-width:1.3;
  opacity:.7; margin-bottom:8px;
}
.folio__empty h2{ font-size:clamp(22px,3vw,32px); }
.folio__empty p{ color:var(--muted); margin-bottom:12px; }

/* -- lightbox -- */
.lightbox{
  position:fixed; inset:0; z-index:280;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:clamp(20px,4vw,48px);
  background:rgba(10,10,10,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--e-soft), visibility .45s;
}
.lightbox[hidden]{ display:grid; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__frame{
  margin:0; text-align:center;
  max-height:85vh;
}
.lightbox__frame img{
  max-width:min(100%, 1100px);
  max-height:78vh;
  width:auto; height:auto;
  margin-inline:auto;
  object-fit:contain;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transform:scale(.96);
  transition:transform .55s var(--e-out);
}
.lightbox.is-open .lightbox__frame img{ transform:scale(1); }
.lightbox__frame figcaption{
  margin-top:16px;
  font-size:14px;
  color:var(--gold-2);
  letter-spacing:.04em;
}
.lightbox__close{
  position:absolute; top:20px; inset-inline-end:24px;
  width:48px; height:48px;
  font-size:32px; line-height:1;
  color:var(--cream);
  border:1px solid rgba(199,173,120,.3);
  transition:background .35s, color .35s, border-color .35s;
}
.lightbox__close:hover{
  background:var(--gold-2); color:var(--ink-2); border-color:transparent;
}
.lightbox__nav{
  width:48px; height:48px;
  display:grid; place-items:center;
  color:var(--gold-2);
  border:1px solid rgba(199,173,120,.3);
  transition:background .35s, color .35s, transform .35s var(--e-out);
}
.lightbox__nav svg{
  width:22px; height:22px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.lightbox__nav:hover{
  background:var(--gold-2); color:var(--ink-2);
  transform:scale(1.06);
}

/* -- admin -- */
.admin-login{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:var(--gutter);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(180,154,104,.16), transparent 55%),
    linear-gradient(165deg, #1a1a1a, var(--ink-2) 55%, #0c0c0c);
}
.admin-login[hidden]{ display:none !important; }
.admin-login__card{
  width:min(100%, 400px);
  display:grid;
  gap:14px;
  padding:clamp(28px,4vw,40px);
  background:rgba(251,249,245,.96);
  border:1px solid rgba(180,154,104,.28);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.admin-login__mark{
  width:52px; height:52px;
  fill:none; stroke:var(--gold); stroke-width:1.3;
  margin-bottom:4px;
}
.admin-login__card h1{
  font-size:clamp(24px,3vw,30px);
  margin-top:-4px;
}
.admin-login__hint{
  font-size:13.5px;
  color:var(--muted);
  margin-bottom:6px;
}
.admin-login .btn{ width:100%; justify-content:center; margin-top:4px; }
.admin-login .admin-field input{
  width:100%;
  height:54px;
  padding-inline:16px;
  background:var(--cream-3);
  border:1px solid rgba(180,154,104,.35);
  font:inherit;
  font-size:16px;
  color:var(--text);
  letter-spacing:.12em;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:border-color .35s, box-shadow .35s;
}
.admin-login .admin-field input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(180,154,104,.18);
}
.admin-login .admin-field input::placeholder{
  letter-spacing:0;
  color:var(--muted-2);
}

.admin-form--grid{
  grid-template-columns:repeat(2,1fr);
  gap:16px 18px;
}
.admin-field--full{ grid-column:1 / -1; }

.page--admin .nav__link{
  background:none; border:0; cursor:pointer; font:inherit;
}

.admin-hero{
  padding-top:clamp(110px,14vw,140px);
  padding-bottom:clamp(28px,4vw,48px);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(180,154,104,.14), transparent 55%),
    linear-gradient(180deg, var(--cream-2), var(--cream));
  border-bottom:1px solid rgba(180,154,104,.18);
}
.admin-hero__title{
  font-size:clamp(28px,4vw,48px);
  font-weight:800;
  letter-spacing:-.025em;
}
.admin-hero__text{
  margin-top:8px;
  color:var(--muted);
  font-size:clamp(14.5px,1.2vw,17px);
}
.admin{ padding-top:clamp(36px,5vw,64px); }
.admin__layout{
  display:grid;
  grid-template-columns:minmax(280px,380px) 1fr;
  gap:clamp(20px,3vw,36px);
  align-items:start;
}
.admin-panel{
  background:rgba(251,249,245,.72);
  border:1px solid rgba(180,154,104,.22);
  padding:clamp(22px,2.4vw,34px);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  position:relative;
  overflow:hidden;
}
.admin-panel::before{
  content:""; position:absolute; inset-inline:0; top:0; height:2px;
  background:linear-gradient(to left,var(--gold-2),var(--gold));
}
.admin-panel__head{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 18px;
  margin-bottom:26px;
}
.admin-panel__num{
  font-family:var(--en);
  font-size:42px; font-weight:600; line-height:1;
  color:rgba(180,154,104,.28);
}
.admin-panel__head h2{
  font-size:clamp(18px,1.8vw,22px);
  margin-bottom:4px;
}
.admin-panel__head p{
  font-size:13.5px; color:var(--muted); line-height:1.7;
}
.admin-panel__link{
  margin-inline-start:auto;
  font-size:13px; font-weight:600;
  color:var(--gold);
  border-bottom:1px solid transparent;
  transition:border-color .3s, color .3s;
  align-self:center;
}
.admin-panel__link:hover{ border-color:var(--gold); color:var(--ink); }

.admin-form{ display:grid; gap:18px; }
.admin-field{ display:grid; gap:8px; }
.admin-field span{
  font-size:13px; font-weight:600; color:var(--gold);
}
.admin-field input[type="text"],
.admin-field input[type="password"],
.admin-field input[type="url"],
.admin-field input[type="tel"],
.admin-field input:not([type]){
  width:100%;
  height:52px;
  padding-inline:16px;
  background:var(--cream-3);
  border:1px solid rgba(180,154,104,.28);
  font:inherit;
  color:var(--text);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:border-color .35s, box-shadow .35s;
}
.admin-field input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(180,154,104,.18);
}

.admin-drop{
  position:relative;
  display:grid;
  min-height:180px;
  place-items:center;
  border:1px dashed rgba(180,154,104,.45);
  background:
    linear-gradient(160deg, rgba(180,154,104,.06), transparent 50%),
    var(--cream-3);
  cursor:pointer;
  overflow:hidden;
  transition:border-color .35s, background .35s, transform .35s var(--e-out);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.admin-drop:hover,
.admin-drop.is-drag{
  border-color:var(--gold);
  background:rgba(180,154,104,.1);
  transform:translateY(-2px);
}
.admin-drop input{
  position:absolute; inset:0;
  opacity:0; cursor:pointer;
  width:100%; height:100%;
}
.admin-drop__hint{
  display:grid; justify-items:center; gap:6px;
  text-align:center; padding:20px;
  pointer-events:none;
}
.admin-drop__hint[hidden]{ display:none; }
.admin-drop__hint svg{
  width:28px; height:28px;
  fill:none; stroke:var(--gold); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:4px;
}
.admin-drop__hint b{ font-size:14.5px; font-weight:600; }
.admin-drop__hint span{ font-size:12.5px; color:var(--muted); }
.admin-drop__preview{
  position:absolute; inset:0;
  pointer-events:none;
}
.admin-drop__preview[hidden]{ display:none; }
.admin-drop__preview img{
  width:100%; height:100%; object-fit:cover;
}
.admin-form .btn{ width:100%; justify-content:center; }
.admin-form .btn:disabled{ opacity:.55; cursor:wait; }

.admin-status{
  margin-top:14px;
  font-size:13.5px;
  min-height:1.5em;
  color:var(--muted);
}
.admin-status.is-busy{ color:var(--gold); }
.admin-status.is-err{ color:#a33; }

.admin-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.admin-list__empty{
  padding:40px 10px;
  text-align:center;
  color:var(--muted);
}
.admin-list__empty[hidden]{ display:none; }

.admin-card{
  display:grid;
  grid-template-rows:140px auto auto;
  background:var(--cream-3);
  border:1px solid rgba(180,154,104,.2);
  overflow:hidden;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s var(--e-out), transform .55s var(--e-out),
             border-color .4s, box-shadow .4s;
  transition-delay:var(--d,0ms);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.admin-card.is-in{ opacity:1; transform:none; }
.admin-card:hover{
  border-color:rgba(180,154,104,.45);
  box-shadow:0 24px 40px -30px rgba(21,21,21,.45);
}
.admin-card__thumb{ overflow:hidden; background:var(--cream-2); }
.admin-card__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--e-soft);
}
.admin-card:hover .admin-card__thumb img{ transform:scale(1.08); }
.admin-card__body{
  padding:12px 14px 4px;
  display:grid; gap:2px;
}
.admin-card__body b{ font-size:14.5px; font-weight:700; }
.admin-card__body span{
  font-size:11.5px; color:var(--muted-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.admin-card__del{
  margin:8px 14px 14px;
  height:38px;
  font-size:13px; font-weight:600;
  color:#8a3030;
  border:1px solid rgba(138,48,48,.28);
  background:rgba(138,48,48,.04);
  transition:background .35s, color .35s, border-color .35s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.admin-card__del:hover{
  background:#8a3030; color:var(--cream-3); border-color:transparent;
}
.admin-card__del:disabled{ opacity:.5; cursor:wait; }

/* toast */
.toast{
  position:fixed;
  inset-inline-start:50%;
  bottom:32px;
  z-index:290;
  transform:translate(-50%, 20px);
  padding:14px 28px;
  background:var(--ink);
  color:var(--cream);
  font-size:14px; font-weight:500;
  border:1px solid rgba(199,173,120,.35);
  opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s, transform .45s var(--e-out);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  white-space:nowrap;
}
.toast.is-on{
  opacity:1; visibility:visible;
  transform:translate(-50%, 0);
}
.toast--ok{ border-color:rgba(199,173,120,.6); }
.toast--err{ border-color:rgba(170,60,60,.55); color:#f2cfcf; }

@media (max-width:980px){
  .folio__grid{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:auto;
  }
  .folio__tile,
  .folio__tile.tile--tall{ grid-column:span 2; grid-row:auto; aspect-ratio:1/1; }
  .folio__tile.tile--wide{ grid-column:span 4; grid-row:auto; aspect-ratio:16/9; }
  .admin__layout{ grid-template-columns:1fr; }
  .admin-form--grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .page-hero{ min-height:58vh; }
  .folio__grid{ grid-template-columns:1fr; }
  .folio__tile,
  .folio__tile.tile--wide,
  .folio__tile.tile--tall{ grid-column:span 1; }
  .folio__tile{ aspect-ratio:4/3; }
  .folio__tile.tile--tall{ aspect-ratio:4/5; }
  .folio__tile.tile--wide{ aspect-ratio:16/11; }
  .folio__tile .tile__body,
  .folio__tile .tile__arrow{ opacity:1; transform:none; }
  .folio__tile::after{ opacity:.78; }
  .lightbox{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:16px;
    padding:72px 16px 28px;
  }
  .lightbox__nav{ position:absolute; bottom:28px; width:44px; height:44px; }
  .lightbox__nav--prev{ inset-inline-start:20px; }
  .lightbox__nav--next{ inset-inline-end:20px; }
  .lightbox__frame{ width:100%; }
}

/* Razor portfolio and editable sections, using the original visual theme. */
[hidden]{display:none!important}
.project-list{display:grid;gap:32px}
.project-row{display:grid;grid-template-columns:minmax(280px,.95fr) minmax(0,1.05fr);background:var(--cream-3);border:1px solid rgba(180,154,104,.24);box-shadow:0 12px 36px rgba(35,30,20,.035);scroll-margin-top:125px;min-width:0}
.project-row__cover{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;padding:0;background:var(--ink);cursor:pointer}
.project-row__cover img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)}
.project-row__cover:hover img{transform:scale(1.045)}
.project-row__gallery{position:absolute;bottom:20px;inset-inline:20px auto;padding:10px 18px;background:rgba(20,20,20,.8);color:var(--cream);font-size:13px;border:1px solid rgba(199,173,120,.6);backdrop-filter:blur(8px)}
.project-row__body{align-self:center;padding:clamp(28px,4vw,62px);min-width:0}
.project-row__number{display:block;font-family:var(--en);font-size:48px;line-height:1;color:var(--gold);opacity:.5;margin-bottom:24px}
.project-row__category{color:var(--gold);font-size:13px;margin-bottom:10px}
.project-row__title{font-size:clamp(23px,2.5vw,36px);font-weight:500;line-height:1.6;overflow-wrap:anywhere}
.project-row__description{color:var(--muted);font-size:15px;line-height:2.1;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:18px;padding-top:18px;border-top:1px solid rgba(180,154,104,.25)}
.project-row__description:empty{display:none}
.lightbox__nav:disabled{opacity:.25;cursor:default}
.project-row__cover:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.custom-content__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:center;gap:50px}
.custom-content__grid>img{width:100%;max-height:520px;object-fit:cover}
.custom-content__text{white-space:pre-wrap;color:var(--muted);line-height:2.1;margin:24px 0}
.hero__lead,.hero__text,.about__quote,.about__text,.card__text,.cta__text,.page-hero__text{white-space:pre-line}
.gallery .tile__body{opacity:1;transform:none}
.gallery .tile::after{opacity:.8}
@media(min-width:981px){.steps{grid-template-columns:repeat(var(--step-count,4),minmax(0,1fr))}}
@media(max-width:680px){.project-row{grid-template-columns:1fr}.project-row__cover{aspect-ratio:4/3}.project-row__body{padding:26px}.project-row__number{font-size:36px;margin-bottom:16px}.project-list{gap:24px}.folio__filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:8px}.folio__chip{flex-shrink:0}.lightbox__frame img{max-height:65vh}.lightbox__frame figcaption{padding-inline:12px}}
.brand-image{width:100%;height:100%;object-fit:contain}
.content-icon-image{width:48px;height:48px;object-fit:contain}
.hero__meta{flex-wrap:wrap}