/* Shared visual system for the completed page. */
:root {
 --accent:#7b6249; --accent-dark:#58422f;
 --paper:#f7f4ee; --paper-alt:#eee8de; --ink:#342c24; --muted:#74695d;
 --sand:#e6d3b6; --sand-hover:#efdfc8; --hairline:#d9cfc1;
 --page-gutter:max(5vw,calc((100vw - 1280px)/2));
 --color-header-bg:var(--paper); --color-header-line:#e6ded2;
 --color-text-dark:var(--ink); --color-ink:var(--ink); --color-ink-soft:#5d5347;
 --color-label:#80715f; --color-line:#cbbca7; --color-line-list:#d9cfc1;
}
body { background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
:focus-visible { outline:2px solid #aa855a; outline-offset:5px; }
button,a { touch-action:manipulation; }
.header { height:82px; padding:0 var(--page-gutter); border-bottom-color:var(--hairline); }
.logo { font-size:20px; line-height:1.16; letter-spacing:.035em; margin-right:54px; }
.nav__link { font-size:15px; line-height:1.5; color:#675a4a; padding:12px 0; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.nav__link:hover { color:#352a1f; border-color:#aa8e6d; }
.contacts { gap:12px; }
.contacts__item { width:42px; height:42px; color:#725b43; background:#e9e1d5; border:1px solid #d7c9b5; }
.contacts__item:hover,.contacts__item[aria-expanded=true] { background:var(--accent); border-color:var(--accent); color:#fffaf3; }
.contact-card { background:var(--paper); border-color:var(--hairline); }
.contact-card::before { background:var(--paper); border-color:var(--hairline); }
.hero { min-height:690px; padding:112px var(--page-gutter) 88px; }
.hero__title { max-width:720px; font-size:clamp(34px,3.4vw,49px); line-height:1.2; font-weight:400; letter-spacing:-.035em; }
.hero__text { max-width:565px; font-size:15px; line-height:1.85; margin-top:27px; color:#f2eade; }
.hero__button,.portfolio__cta { display:inline-flex; align-items:center; justify-content:center; gap:28px; width:292px; max-width:100%; min-height:64px; height:auto; border:1px solid #f6e8d044; border-radius:10px; padding:18px 25px; background:var(--sand); color:#382b1c; font:500 16px/1.5 Inter,Arial,sans-serif; box-shadow:0 7px 22px #25190d15; transition:background .2s,box-shadow .2s,transform .2s; cursor:pointer; }
.hero__button { margin-top:34px; }
.hero__button:hover,.portfolio__cta:hover { background:var(--sand-hover); color:#382b1c; border-color:#f6e8d044; transform:translateY(-2px); box-shadow:0 10px 27px #25190d24; }
.hero__button:active,.portfolio__cta:active { transform:translateY(0); }
.portfolio__cta span { margin:0; }
.section .desk { display:none; }
.how,.scope { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,1fr); column-gap:55px; align-items:center; align-content:center; height:auto; min-height:690px; padding:88px var(--page-gutter); }
.section__copy { min-width:0; }
.how { background:#eee8de; }
.scope { background:var(--paper); border-bottom:1px solid #e4dbce; }
.how .eyebrow,.scope .eyebrow { margin:0 0 24px; }
.how .section__title,.scope .section__title { white-space:normal; margin:0; font-size:clamp(32px,3.1vw,44px); line-height:1.13; letter-spacing:-.025em; }
.how__text { grid-column:1; margin:23px 0 0; font-size:15px; line-height:1.85; white-space:normal; color:var(--color-ink-soft); }
.how__img,.scope__img { position:static; grid-column:2; grid-row:1; align-self:center; left:auto; right:auto; top:auto; width:100%; height:auto; max-height:620px; object-fit:contain; opacity:1; margin:0; -webkit-mask-image:linear-gradient(to right,transparent,#000 7%); mask-image:linear-gradient(to right,transparent,#000 7%); }
.scope__list { grid-column:1; width:100%; margin:28px 0 0; }
.scope__item { height:auto; min-height:76px; padding:13px 0; }
.scope__num { width:59px; flex-shrink:0; color:#8c7354; font-size:40px; line-height:1; }
.scope__sep { height:29px; flex-shrink:0; margin-right:22px; }
.scope__name { font-size:17px; line-height:1.45; white-space:normal; }
.eyebrow { font-size:10px; letter-spacing:.18em; color:#7c6d5a; }
.portfolio { background:var(--paper); padding:84px var(--page-gutter) 78px; }
.portfolio__intro>p,.portfolio-card__description { color:var(--muted); }
.portfolio__intro>p { font-size:13px; line-height:1.85; }
.portfolio-card__photo { border-radius:9px; }
.portfolio-card__meta { color:#82715e; }
.portfolio-card__count { border-radius:5px; }
.portfolio-card__arrow { border-color:#f9e5c6ab; }
.portfolio-card__caption { padding-top:21px; }
.portfolio-card__description { font-size:12px; line-height:1.85; }
.portfolio__end { background:#eae1d3; border:1px solid #ded0bb; border-radius:15px; margin-top:58px; padding:39px 42px; }
.portfolio__end>p { font-size:clamp(30px,3vw,40px); color:#4b3c2c; letter-spacing:-.02em; }
.quiz { background:var(--paper); color:var(--ink); border-radius:13px; }
.quiz__header,.quiz__footer { background:var(--paper); }
.quiz__header { border-color:var(--hairline); }
.quiz__option { border-color:#d9cdbd; border-radius:8px; background:#fffcf7; }
.quiz__option:hover { border-color:#ac9271; background:#f4ede2; }
.quiz__option:has(input:checked) { background:#ece0ce; border-color:#9d7e56; box-shadow:inset 0 0 0 1px #9d7e56; }
.quiz__button { border-radius:8px; }
.quiz__back { background:var(--paper); border-color:#d8ccbc; }
.quiz__aside { background:#eae1d4; }
.quiz__tip { background:#e0d5c5; color:#5f503e; }
.quiz__field input,.quiz__text-copy { background:#fffdf9; border-color:#cdbda6; }
.quiz__review { background:#eee6da; }
.quiz__close:hover { background:#dfd1bd; }
.project-gallery { border-color:#d5c1a144; }
.project-gallery__close,.project-gallery__nav { border-color:#e4cfad80; }
@media(min-width:1600px) { .hero { min-height:740px; } }
@media(max-width:1050px) {
 .how,.scope { gap:0 32px; padding-top:70px; padding-bottom:70px; min-height:610px; }
 .how .section__title,.scope .section__title { font-size:35px; }
 .scope__name { font-size:15px; }
 .scope__sep { margin-right:16px; }
 .portfolio__end { padding:30px; }
}
@media(max-width:760px) {
 :root { --page-gutter:24px; }
 .header { height:72px; padding-right:20px; padding-left:20px; }
 .logo { font-size:17px; margin-right:auto; letter-spacing:.02em; }
 .nav__link { font-size:13px; }
 .contacts { gap:8px; margin-left:17px; }
 .contacts__item,.contacts__item:nth-child(n+3) { width:36px; height:36px; }
 .contacts__item svg { width:19px; height:19px; }
 .hero { min-height:650px; padding:67px 24px 65px; background-position:62% center; }
 .hero__title { font-size:clamp(29px,7.8vw,39px); line-height:1.2; max-width:530px; }
 .hero__text { font-size:14px; line-height:1.8; margin-top:24px; }
 .hero__button,.portfolio__cta { min-height:60px; font-size:15px; width:280px; }
 .how,.scope { display:grid; grid-template-columns:minmax(0,1fr); gap:0; height:auto; min-height:0; padding:58px 24px 0; }
 .how .section__title,.scope .section__title { font-size:34px; line-height:1.12; }
 .how .eyebrow,.scope .eyebrow { margin-bottom:22px; }
 .how__text { font-size:14px; line-height:1.8; margin-top:21px; }
 .how__img,.scope__img { grid-column:1; grid-row:auto; width:min(100%,540px); max-height:none; margin:30px auto 0; mask-image:none; -webkit-mask-image:none; }
 .scope__list { margin-top:23px; }
 .scope__name { font-size:16px; line-height:1.5; }
 .scope__num { width:56px; font-size:38px; }
 .scope__sep { margin-right:19px; }
 .portfolio { padding:58px 24px; }
 .portfolio__intro { gap:20px; }
 .portfolio h2 { font-size:41px; line-height:1.04; }
 .portfolio__end { align-items:stretch; gap:24px; padding:29px 24px; margin-top:40px; border-radius:12px; }
 .portfolio__end>p { font-size:33px; }
 .portfolio__cta { width:100%; }
 .quiz__body { padding-right:22px; }
}
@media(max-width:380px) {
 .header { padding-right:14px; padding-left:14px; }
 .contacts { gap:6px; margin-left:12px; }
 .contacts__item,.contacts__item:nth-child(n+3) { width:32px; height:32px; }
 .nav__link { font-size:12px; }
 .hero { padding-top:54px; }
 .hero__title { font-size:29px; }
 .how .section__title,.scope .section__title { font-size:31px; }
 .portfolio h2 { font-size:38px; }
}
@media(prefers-reduced-motion:reduce) { .hero__button,.portfolio__cta,.contacts__item,.nav__link { transition:none; } }