:root{
  --bg:#eee9df;
  --paper:#f8f5ee;
  --ink:#151515;
  --muted:#68645e;
  --line:rgba(21,21,21,.16);
  --dark:#151515;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
}
img{display:block;width:100%}
button,input,select{font:inherit}
button{cursor:pointer}
.ticker{
  overflow:hidden;
  background:var(--dark);
  color:#fff;
  font:600 11px/1 Inter,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ticker-track{
  display:flex;
  gap:44px;
  min-width:max-content;
  padding:11px 0;
  animation:marquee 22s linear infinite;
}
.ticker-track span::after{content:"•";margin-left:44px;color:#a9a39a}
@keyframes marquee{to{transform:translateX(-50%)}}
.site-header{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px,4vw,70px);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(238,233,223,.88);
  backdrop-filter:blur(14px);
}
.brand{
  color:var(--ink);
  text-decoration:none;
  font:700 22px/1 Oswald,sans-serif;
  letter-spacing:.03em;
}
.brand span{color:#a0322a}
nav{display:flex;align-items:center;gap:28px}
nav a{color:var(--ink);text-decoration:none;font-size:13px}
.nav-cta{
  border:1px solid var(--ink);
  background:transparent;
  padding:11px 16px;
  font-size:12px;
  font-weight:600;
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);
  min-height:calc(100vh - 110px);
  border-bottom:1px solid var(--line);
}
.hero-media{
  position:relative;
  min-height:680px;
  overflow:hidden;
  background:#cfc8bd;
}
.hero-media img{height:100%;object-fit:cover}
.hero-number{
  position:absolute;
  left:28px;
  bottom:20px;
  font:700 clamp(72px,10vw,155px)/.8 Oswald,sans-serif;
  color:rgba(255,255,255,.84);
}
.hero-copy{
  padding:clamp(42px,6vw,96px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.eyebrow{
  margin:0 0 22px;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:600;
}
h1,h2,h3,p{margin-top:0}
h1{
  max-width:700px;
  font:700 clamp(46px,5.8vw,92px)/.93 Oswald,sans-serif;
  letter-spacing:-.035em;
  margin-bottom:30px;
}
.lead{
  max-width:540px;
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
  margin-bottom:42px;
}
.price-row{
  border-top:1px solid var(--line);
  padding-top:25px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.price{display:block;font:600 30px/1 Oswald,sans-serif}
.price-note{display:block;margin-top:7px;color:var(--muted);font-size:11px}
.primary-btn{
  border:1px solid var(--dark);
  background:var(--dark);
  color:#fff;
  min-height:54px;
  padding:0 28px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  transition:.2s ease;
}
.primary-btn:hover{transform:translateY(-2px);background:#2c2c2c}
.micro{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font-size:11px}
.micro span::before{content:"— ";color:var(--ink)}
.statement{
  padding:clamp(70px,11vw,170px) clamp(20px,4vw,70px);
  border-bottom:1px solid var(--line);
}
.statement p{
  font:600 clamp(38px,7vw,106px)/.95 Oswald,sans-serif;
  letter-spacing:-.035em;
  margin:0;
}
.statement p:nth-child(2){text-align:center}
.statement p:nth-child(3){max-width:1200px;margin-left:auto;text-align:right;color:#6c675f}
.gallery{
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  min-height:650px;
  border-bottom:1px solid var(--line);
}
.gallery figure{margin:0;overflow:hidden;border-right:1px solid var(--line)}
.gallery img{height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
.gallery-card{
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--paper);
}
.card-index{font-size:11px;color:var(--muted)}
.gallery-card h2{font:600 clamp(38px,4vw,68px)/.95 Oswald,sans-serif}
.gallery-card p{color:var(--muted);line-height:1.6;max-width:260px}
.details{padding:110px clamp(20px,4vw,70px);background:var(--paper)}
.section-heading{display:grid;grid-template-columns:.7fr 1.3fr;align-items:end;margin-bottom:70px}
.section-heading h2,.sizes h2,.order-strip h2{
  font:600 clamp(44px,6vw,82px)/.95 Oswald,sans-serif;
  letter-spacing:-.025em;
  margin:0;
}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.detail-grid article{padding:30px 24px 10px 0;border-right:1px solid var(--line);min-height:210px}
.detail-grid article+article{padding-left:24px}
.detail-grid span{font-size:11px;color:var(--muted)}
.detail-grid h3{font:600 24px/1.1 Oswald,sans-serif;margin:35px 0 12px}
.detail-grid p{color:var(--muted);font-size:14px;line-height:1.6}
.sizes{
  padding:110px clamp(20px,4vw,70px);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8vw;
  border-bottom:1px solid var(--line);
}
.sizes-copy{max-width:450px;color:var(--muted);line-height:1.7;margin-top:25px}
table{width:100%;border-collapse:collapse}
th,td{padding:20px 10px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
td{font-size:14px}
.table-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:15px}
.order-strip{
  background:var(--dark);
  color:#fff;
  padding:85px clamp(20px,4vw,70px);
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
}
.primary-btn.light{background:#fff;color:var(--ink);border-color:#fff}
.faq{padding:70px clamp(20px,4vw,70px) 110px}
details{border-bottom:1px solid var(--line);padding:25px 0}
summary{font:500 22px/1.2 Oswald,sans-serif;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;font-family:Inter}
details[open] summary::after{content:"–"}
details p{color:var(--muted);line-height:1.7;max-width:700px;margin:18px 0 0}
footer{
  padding:35px clamp(20px,4vw,70px);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:11px;
}
.order-dialog{
  width:min(620px,calc(100% - 30px));
  border:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 30px 100px rgba(0,0,0,.35);
}
.order-dialog::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(4px)}
.dialog-close{
  position:absolute;right:18px;top:12px;border:0;background:transparent;font-size:32px;
}
.dialog-head{padding:45px 45px 15px}
.dialog-head h2{font:600 50px/1 Oswald,sans-serif;margin-bottom:18px}
.dialog-head p:last-child{color:var(--muted);line-height:1.6}
form{padding:10px 45px 45px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:8px;font-size:12px;font-weight:600}
label:nth-child(1),label:nth-child(2),.full,.form-status{grid-column:1/-1}
input,select{
  width:100%;border:1px solid var(--line);background:#fff;padding:14px 13px;outline:none;
}
input:focus,select:focus{border-color:var(--ink)}
.form-status{margin:0;font-size:12px;min-height:18px}
@media (max-width:980px){
  nav a{display:none}
  .hero{grid-template-columns:1fr}
  .hero-media{min-height:68vh}
  .hero-copy{padding:55px 24px}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery-large{grid-column:1/-1;min-height:500px}
  .gallery-card{min-height:390px}
  .detail-grid{grid-template-columns:1fr 1fr}
  .section-heading,.sizes{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .site-header{height:66px;padding:0 16px}
  .hero-media{min-height:56vh}
  h1{font-size:48px}
  .price-row{align-items:stretch;flex-direction:column}
  .primary-btn{width:100%}
  .statement{padding:75px 16px}
  .statement p{font-size:40px}
  .gallery{grid-template-columns:1fr}
  .gallery-large{grid-column:auto;min-height:420px}
  .gallery figure{min-height:420px;border-right:0;border-bottom:1px solid var(--line)}
  .gallery-card{min-height:360px}
  .details,.sizes{padding:75px 16px}
  .detail-grid{grid-template-columns:1fr}
  .detail-grid article{border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}
  .order-strip{align-items:stretch;flex-direction:column;padding:65px 16px}
  .faq{padding:55px 16px 80px}
  footer{align-items:flex-start;flex-direction:column;padding:30px 16px}
  form{grid-template-columns:1fr;padding:10px 22px 30px}
  .dialog-head{padding:40px 22px 10px}
  label{grid-column:1/-1}
}


/* Civil Statement. — version 2 */
.brand{text-transform:none;font-family:Inter,Arial,sans-serif;font-weight:600;letter-spacing:-.04em}
.brand span{color:var(--ink)}
.old-price{display:block;color:var(--muted);text-decoration:line-through;font:500 16px/1 Inter,sans-serif;margin-bottom:8px}
.price-stack{display:block}.price{font-size:42px;letter-spacing:-.03em}.price-note{text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.price-row{align-items:stretch;flex-direction:column}.price-row .primary-btn{width:100%;min-height:72px;font-size:15px}
.gallery{grid-template-columns:1.25fr .75fr .8fr}.gallery-editorial{min-height:700px}
.gallery-detail{display:grid;grid-template-rows:1fr 1fr;border-right:1px solid var(--line);min-height:700px}
.detail-shot{position:relative;overflow:hidden;background:#d8d1c5}.detail-shot:first-child{border-bottom:1px solid var(--line)}
.detail-label{position:absolute;top:18px;left:18px;z-index:2;font-size:10px;letter-spacing:.16em;background:rgba(248,245,238,.9);padding:8px 10px}
.crop-frame{width:100%;height:100%;overflow:hidden}.crop-frame img{width:130%;max-width:none;height:130%;object-fit:cover;object-position:28% 44%;transform:translate(-12%,-10%);transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .8s cubic-bezier(.22,.61,.36,1);}
.fabric-texture{width:100%;height:100%;background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.08),transparent 28%),repeating-linear-gradient(115deg,#1b1b1b 0 2px,#202020 2px 4px,#181818 4px 6px);filter:contrast(1.08)}
.size-pills{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.size-pills button{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;min-height:92px;font:600 25px/1 Oswald,sans-serif}
.size-pills button:hover{background:var(--dark);color:#fff}
@media (max-width:980px){.gallery{grid-template-columns:1fr 1fr}.gallery-editorial{grid-column:1/-1;min-height:520px}.gallery-detail{min-height:520px}}
@media (max-width:640px){.gallery{grid-template-columns:1fr}.gallery-editorial{grid-column:auto;min-height:440px}.gallery-detail{min-height:540px;border-right:0;border-bottom:1px solid var(--line)}.size-pills{grid-template-columns:repeat(2,1fr)}}
/* Логотип Civil Statement. */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: auto;
  color: #151515;
  text-decoration: none;
}

.brand-name {
  display: block;
  font-family: Inter, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #151515;
}

.brand-tagline {
  display: block;
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #68645e;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.fabric-image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:none;
}
.gallery figure:hover img{
    transform: scale(1.03);
}

.crop-frame:hover img{
    transform: scale(1.03);
}
.gallery img{
    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .8s cubic-bezier(.22,.61,.36,1);
}

.gallery figure:hover img,
.crop-frame:hover img{
    transform:scale(1.03);
    filter:brightness(.96);
}
.gallery img{
    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .8s cubic-bezier(.22,.61,.36,1);
}

.gallery figure,
.crop-frame,
.fabric-texture{
    overflow:hidden;
}

.gallery figure:hover img,
.crop-frame:hover img,
.fabric-texture:hover img{
    transform:scale(1.03);
    filter:brightness(.96);
}
.crop-frame:hover img{
    transform:translate(-12%,-10%) scale(1.03);
    filter:brightness(.96);
}
.primary-btn:disabled{
  opacity:.65;
  cursor:wait;
  transform:none;
}

.form-status{
  min-height:20px;
  margin:4px 0 0;
  font-size:12px;
  line-height:1.5;
}

.reveal{
  opacity:0;
  transform:translateY(45px);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
body{
  animation:pageFadeIn .7s ease both;
}

@keyframes pageFadeIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}
.primary-btn,
.nav-cta{
  position:relative;
  overflow:hidden;
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease,
    color .3s ease;
}

.primary-btn:hover,
.nav-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.primary-btn::after,
.nav-cta::after{
  content:"";
  position:absolute;
  top:0;
  left:-130%;
  width:70%;
  height:100%;
  background:linear-gradient(
    100deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );
  transform:skewX(-18deg);
  transition:left .65s ease;
}

.primary-btn:hover::after,
.nav-cta:hover::after{
  left:140%;
}
.order-dialog[open]{
  animation:dialogAppear .35s cubic-bezier(.22,.61,.36,1) both;
}

.order-dialog::backdrop{
  animation:backdropAppear .3s ease both;
}

@keyframes dialogAppear{
  from{
    opacity:0;
    transform:translateY(25px) scale(.97);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes backdropAppear{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}
.hero-media{
  overflow:hidden;
}

.hero-parallax{
  will-change:transform;
  transform:scale(1.04);
  transition:transform .1s linear;
}
.site-header nav a{
  position:relative;
}

.site-header nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s ease;
}

.site-header nav a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }
}
/* Loader внутри кнопки */

.button-loader{
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,.25);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .7s linear infinite;
    display:inline-block;
    margin-right:10px;
    vertical-align:middle;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}