/* ============================================================
   INTEGRAL CUSTOM MADE — commercial proposal
   Design language: quiet luxury. Bone paper, warm ink, bronze.
   ============================================================ */

:root{
  --bone:        #F4F0E8;
  --bone-deep:   #ECE6DA;
  --paper:       #FBF9F4;
  --ink:         #16130E;
  --ink-soft:    #4A4339;
  --muted:       #6E665A;
  --bronze:      #9A744A;
  --bronze-deep: #7C5C36;
  --bronze-lt:   #C2A06B;
  --line:        rgba(22,19,14,0.13);
  --line-soft:   rgba(22,19,14,0.07);
  --shadow:      0 30px 80px -40px rgba(22,19,14,0.35);

  --serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 80px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle paper grain for richness */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  opacity:0.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
}
main, header, footer{position:relative; z-index:1}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--bone); padding:12px 18px; border-radius:0 0 6px 0;
}
.skip:focus{left:0}

/* ---------- typographic helpers ---------- */
.eyebrow, .section__kicker{
  font-size:11.5px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--bronze-deep); margin:0;
}
.cur{ font-size:0.52em; letter-spacing:0.14em; font-weight:500; color:var(--muted); vertical-align:0.18em; margin-left:0.15em; }

/* tabular figures so price columns align and thin-space grouping stays steady */
.num-tab{ font-variant-numeric:tabular-nums; }

/* keyboard focus — visible on both light and dark surfaces */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px;
}
.cta:focus-visible, .langtoggle button:focus-visible,
.section--summary :focus-visible, .footer :focus-visible{ outline-color:var(--bronze-lt); }
.skip:focus{ outline:2px solid var(--bronze-lt); outline-offset:2px; }

/* language visibility — qualify with .lang so the html.lang-en ROOT class never
   matches these rules (otherwise display:none would hide the whole document) */
.lang.lang-en{display:none}
html.lang-en .lang.lang-ru{display:none}
html.lang-en .lang.lang-en{display:inline}
html.lang-en .clause__body .lang.lang-en{display:block}

/* ============================================================ TOPBAR */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  background:rgba(244,240,232,0.82);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line-soft);
}
.topbar__inner{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; gap:24px;
  transition:padding .4s ease;
}
.topbar.scrolled .topbar__inner{ padding-top:14px; padding-bottom:14px; }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand__mark{
  width:32px; height:38px; border-radius:0;
  background:transparent; border:1px solid var(--ink); color:var(--ink);
  display:grid; place-items:center; padding-bottom:2px;
  font-family:var(--serif); font-style:italic; font-size:22px; line-height:1;
}
.brand__mark--lg{
  width:42px; height:50px; font-size:30px;
  border-color:rgba(244,240,232,0.4); color:var(--bronze-lt);
}
.brand__name{
  font-size:14px; font-weight:600; letter-spacing:0.22em; line-height:1.05;
  display:flex; flex-direction:column;
}
.brand__sub{ font-size:9.5px; font-weight:400; letter-spacing:0.34em; color:var(--muted); }

.topnav{ display:flex; gap:30px; }
.topnav a{
  font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
  position:relative; padding:4px 0; transition:color .25s;
}
.topnav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--bronze);
  transition:width .3s ease;
}
.topnav a:hover{ color:var(--ink); }
.topnav a:hover::after{ width:100%; }

.cta{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
  padding:0 22px; border:1px solid var(--ink); border-radius:40px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.cta:hover{ background:var(--ink); color:var(--bone); }

/* ============================================================ HERO */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:160px var(--pad) 90px;
  max-width:var(--maxw); margin:0 auto;
  position:relative;
}
.hero__inner{ max-width:980px; }
.hero .eyebrow{ margin-bottom:30px; }
.hero__title{
  font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(2.1rem, 8vw, 5.8rem);
  line-height:1.08; letter-spacing:0.008em; margin:0 0 34px;
  text-transform:uppercase; overflow-wrap:break-word; hyphens:none;
}
.hero__project{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.6vw,1.85rem);
  color:var(--bronze-deep); margin:0 0 56px; letter-spacing:0.01em;
}

.hero__meta{ border-top:1px solid var(--line); padding-top:30px; max-width:760px; }
.meta-row{ display:flex; gap:24px; align-items:baseline; }
.meta-row dt{
  flex:0 0 130px; font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:0;
}
.meta-row dd{ margin:0; font-size:15.5px; color:var(--ink); overflow-wrap:anywhere; }
.meta-row--wide{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line-soft); }
.meta-row--wide dd{ display:flex; flex-direction:column; gap:3px; }
.meta-row--wide dd span:first-child{ font-size:16.5px; font-weight:500; letter-spacing:0.01em; }
.meta-note{ font-size:12.5px; color:var(--muted); letter-spacing:0.04em; }

.meta-grid{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 56px; }
.meta-grid .meta-row dt{ flex:0 0 110px; }
.blank{ display:inline-block; min-width:120px; border-bottom:1px dashed var(--line); height:1em; transform:translateY(-2px); }

.hero__note{
  margin:54px 0 0; max-width:680px;
  font-size:12.5px; line-height:1.75; color:var(--muted); letter-spacing:0.01em;
}

.hero__scroll{ position:absolute; left:var(--pad); bottom:34px; width:1px; height:54px; background:var(--line); overflow:hidden; }
.hero__scroll span{ position:absolute; top:-54px; left:0; width:1px; height:54px; background:var(--bronze); animation:scrolldrop 2.4s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes scrolldrop{ 0%{transform:translateY(0)} 60%,100%{transform:translateY(108px)} }

/* ============================================================ SECTIONS */
.section{ padding:clamp(70px,11vw,150px) 0; }
.section--scope{ background:var(--paper); border-top:1px solid var(--line-soft); }
.section__head{ margin-bottom:clamp(46px,7vw,90px); max-width:760px; }
.section__kicker{ display:block; margin-bottom:18px; }
.section__title{
  font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.06; letter-spacing:-0.01em; margin:0;
}

/* ---------- items ---------- */
.items{ display:flex; flex-direction:column; gap:clamp(60px,9vw,130px); }
.item{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,5vw,84px);
  align-items:center;
}
.item--flip .item__media{ order:2; }

.item__media{ position:relative; }
.gallery--grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gallery--single{ display:block; }
.shot{ margin:0; overflow:hidden; border-radius:4px; background:var(--bone-deep); box-shadow:var(--shadow); }
.gallery--grid .shot{ aspect-ratio:1/1; }
.gallery--single .shot{ aspect-ratio:3/4; max-width:440px; margin:0 auto; }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.item:hover .shot img{ transform:scale(1.045); }

.item__index{
  font-family:var(--serif); font-style:italic; font-size:clamp(2.4rem,5vw,3.6rem);
  color:var(--bronze-lt); line-height:1; margin-bottom:14px;
}
.item__name{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.2vw,2.5rem);
  line-height:1.08; margin:0 0 30px; letter-spacing:-0.01em;
}
.spec{ margin:0 0 30px; border-top:1px solid var(--line); }
.spec__row{ display:grid; grid-template-columns:140px 1fr; gap:20px; padding:15px 0; border-bottom:1px solid var(--line-soft); }
.spec__row dt{ margin:0; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); font-weight:500; padding-top:2px; }
.spec__row dd{ margin:0; font-size:15.5px; color:var(--ink-soft); line-height:1.55; font-variant-numeric:tabular-nums; }

.item__total{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-top:8px; }
.item__total-label{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.item__total-value{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------- summary ---------- */
.section--summary{ background:var(--ink); color:var(--bone); }
.summary{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.section__kicker--light{ color:var(--bronze-lt); }
.summary__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.04; margin:16px 0 22px; }
.summary__hint{ color:rgba(244,240,232,0.6); font-size:14px; max-width:380px; margin:0; }

.summary__right{ border-top:1px solid rgba(244,240,232,0.18); }
.total-row{ display:flex; justify-content:space-between; align-items:baseline; gap:32px; padding:20px 0; border-bottom:1px solid rgba(244,240,232,0.12); }
.total-label{ font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(244,240,232,0.66); }
.total-value{ font-family:var(--serif); font-size:1.5rem; color:var(--bone); white-space:nowrap; font-variant-numeric:tabular-nums; }
.total-row .cur{ color:rgba(244,240,232,0.5); }
.total-row--grand{ margin-top:14px; padding-top:40px; border-top:1px solid rgba(244,240,232,0.18); border-bottom:none; }
.total-row--grand .total-label{ color:var(--bronze-lt); font-weight:500; }
.total-row--grand .total-value{ font-size:clamp(2.2rem,5vw,3.4rem); color:#fff; }
.total-row--grand .cur{ color:var(--bronze-lt); }

/* ---------- conditions / prose ---------- */
.section--conditions{ background:var(--paper); }
.prose{ font-size:clamp(1.05rem,1.8vw,1.35rem); line-height:1.85; color:var(--ink-soft); max-width:62ch; letter-spacing:0.002em; }
.prose--lead::first-line{ color:var(--ink); }

/* ---------- invoice card ---------- */
.section--invoice{ background:var(--bone); }
.invoice-card{
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:clamp(34px,5vw,64px); box-shadow:var(--shadow); max-width:780px;
}
.invoice-card__head{ margin-bottom:32px; }
.invoice-card__title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3vw,2.2rem); margin:14px 0 0; letter-spacing:0.04em; }
.bank{ margin:0; border-top:1px solid var(--line); }
.bank-row{ display:grid; grid-template-columns:minmax(150px,200px) 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.bank-row dt{ margin:0; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.bank-row dd{ margin:0; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* ---------- offer ---------- */
.section--offer{ background:var(--paper); }
.offer__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,70px); }
.offer__head .section__kicker{ margin-bottom:16px; }

.langtoggle{ display:inline-flex; border:1px solid var(--line); border-radius:40px; padding:4px; background:var(--bone); }
.langtoggle button{
  appearance:none; border:none; background:none; cursor:pointer;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.1em;
  padding:8px 18px; border-radius:30px; color:var(--muted); transition:color .25s, background .25s;
}
.langtoggle button.is-active{ background:var(--ink); color:var(--bone); }

.clauses{ border-top:1px solid var(--line); }
.clause{ border-bottom:1px solid var(--line); }
.clause summary{
  display:flex; align-items:flex-start; gap:24px; padding:26px 4px; cursor:pointer; list-style:none;
}
.clause summary::-webkit-details-marker{ display:none; }
.clause summary:hover .clause__idx{ color:var(--bronze); }
.clause summary:hover .clause__title{ color:var(--bronze-deep); }
.clause__idx{ font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--bronze-lt); flex:0 0 auto; min-width:34px; line-height:1.3; transition:color .25s ease; }
.clause__title{ font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.6rem); font-weight:400; flex:1; line-height:1.25; transition:color .25s ease; }
.clause__marker{ position:relative; width:16px; height:16px; flex:0 0 auto; margin-top:7px; }
.clause__marker::before,.clause__marker::after{ content:""; position:absolute; background:var(--bronze); transition:transform .3s ease, opacity .3s ease; }
.clause__marker::before{ top:7px; left:0; width:16px; height:1.5px; }
.clause__marker::after{ top:0; left:7px; width:1.5px; height:16px; }
.clause[open] .clause__marker::after{ transform:scaleY(0); opacity:0; }
.clause[open] .clause__idx{ color:var(--bronze); }
.clause__body{ padding:0 4px 34px 58px; max-width:75ch; }
.clause__body p{ margin:0 0 14px; font-size:15px; line-height:1.78; color:var(--ink-soft); }
.clause__body p:last-child{ margin-bottom:0; }
.clause[open] .clause__body{ animation:fadein .5s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* ---------- terms ---------- */
.section--terms{ background:var(--bone); }
.terms{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); }
.term h3{ font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bronze-deep); margin:0 0 14px; font-weight:600; }
.term p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--ink-soft); }

/* ============================================================ FOOTER */
.footer{ background:var(--ink); color:var(--bone); padding:clamp(50px,7vw,80px) 0; }
.footer__inner{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.footer__brand{ display:flex; align-items:center; gap:18px; }
.footer__name{ margin:0; font-size:14px; font-weight:500; letter-spacing:0.06em; max-width:38ch; }
.footer__lic{ margin:4px 0 0; font-size:12px; color:rgba(244,240,232,0.55); letter-spacing:0.04em; }
.footer__contact{ text-align:right; }
.footer__contact > a{ display:inline-block; padding:4px 0; font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:0.04em; transition:color .25s; }
.footer__contact > a:hover{ color:var(--bronze-lt); }
.footer__law{ margin:10px 0 0; font-size:11.5px; color:rgba(244,240,232,0.5); letter-spacing:0.08em; }

/* ============================================================ REVEAL */
html.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
html.js [data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hero__scroll{ display:none; }
  .item:hover .shot img{ transform:none; }
  .clause[open] .clause__body{ animation:none; }
  .topbar, .topbar__inner{ transition:none; }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 960px){
  .item{ grid-template-columns:1fr; gap:34px; }
  .item--flip .item__media{ order:0; }
  .gallery--single .shot{ max-width:340px; }
  .summary{ grid-template-columns:1fr; }
  .terms{ grid-template-columns:1fr; }
  .topnav{ display:none; }
}
@media (max-width: 620px){
  html{ scroll-padding-top:64px; }
  body{ font-size:16px; }
  .topbar__inner{ padding:13px var(--pad); }
  .hero{ padding-top:120px; }
  .hero__title{ font-size:clamp(1.7rem, 7.5vw, 2.6rem); }
  .meta-grid{ grid-template-columns:1fr; gap:14px; }
  .meta-row{ gap:16px; }
  .meta-row dt{ flex:0 0 104px; }
  .spec__row{ grid-template-columns:1fr; gap:4px; padding:13px 0; }
  .bank-row{ grid-template-columns:1fr; gap:3px; }
  .clause__body{ padding-left:4px; }
  .clause summary{ gap:14px; }
  .langtoggle button{ padding:11px 20px; min-height:44px; }
  .topbar__inner{ gap:14px; }
  .cta{ padding:0 16px; font-size:11.5px; letter-spacing:0.08em; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .footer__contact{ text-align:left; }
}