@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root{
  --paper:#f2f1ed;
  --paper-2:#e9e7e0;
  --ink:#171717;
  --ink-2:#232323;
  --red:#d8554f;
  --line:rgba(23,23,23,.18);
  --line-dark:rgba(255,255,255,.15);
  --muted:#8e8e8e;
  --max:1320px;
  --gutter:clamp(22px,4vw,64px);
  --gap:clamp(18px,2.1vw,32px);
  --display:"Oswald",Impact,sans-serif;
  --body:"Manrope",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.52}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
strong{font-weight:700}

.topbar{
  position:sticky;top:0;z-index:50;min-height:58px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:0 var(--gutter);background:rgba(23,23,23,.97);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.brand,.topbar-cta,.nav a,.eyebrow,.case-meta,.micro{
  text-transform:uppercase;letter-spacing:.075em;font-size:10px;font-weight:700
}
.nav{display:flex;gap:28px}.nav a,.topbar-cta{opacity:.76}.nav a:hover,.topbar-cta:hover{opacity:1}.topbar-cta{text-align:right}

.section-light,.section-dark,.section-red,.footer{padding-left:var(--gutter);padding-right:var(--gutter)}
.section-light{background:var(--paper)}.section-dark{background:var(--ink-2);color:#f3f2ed}.section-red{background:var(--red);color:#fff}
.eyebrow{padding-top:26px;margin-bottom:38px}.eyebrow.muted{color:#858585}.eyebrow.pale{color:rgba(255,255,255,.7)}

h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:-.035em}
h1{font-size:clamp(58px,6.5vw,94px);line-height:.94;margin-bottom:26px;max-width:12.8ch}
h1 span{display:block}
h2{font-size:clamp(42px,4.35vw,64px);line-height:.98}
h3{font-size:clamp(25px,2.15vw,34px);line-height:1.01}
p{max-width:62ch}

.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:1px solid currentColor;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:11px;cursor:pointer;transition:.2s ease}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}.btn-red:hover{background:#bf4843;border-color:#bf4843}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}.btn-light:hover{background:transparent;color:#fff}
.btn-outline-dark:hover{background:var(--ink);color:#fff}
.text-link{display:inline-block;padding-bottom:4px;border-bottom:1px solid currentColor;text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:700}

.hero{position:relative;min-height:calc(100vh - 58px);overflow:hidden;padding-bottom:44px}
.hero-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:6.7fr 5.3fr;gap:var(--gap);align-items:center;min-height:calc(100vh - 145px)}
.hero-copy{padding:26px 0 34px}
.hero h1 span{color:var(--red)}
.hero-lead{width:min(610px,95%);font-size:clamp(18px,1.55vw,24px);line-height:1.34;margin-bottom:14px}
.hero-note{width:min(560px,90%);margin:0;color:#4f4f4f;font-size:14px;line-height:1.55}
.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.hero-marker{position:absolute;right:var(--gutter);bottom:4px;font-family:var(--display);font-size:clamp(66px,8vw,116px);line-height:1;color:rgba(23,23,23,.07)}

.placeholder{background:linear-gradient(135deg,rgba(23,23,23,.035) 25%,transparent 25%) 0 0/26px 26px,linear-gradient(315deg,rgba(23,23,23,.035) 25%,transparent 25%) 0 0/26px 26px,var(--paper-2);border:1px solid rgba(23,23,23,.1);display:flex;align-items:center;justify-content:center;text-align:center;color:#777;font-family:var(--display);font-size:13px;letter-spacing:.065em}
.placeholder-person{height:min(68vh,650px);min-height:520px;border:none;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0 14%)}
.placeholder-tall{aspect-ratio:3/4;min-height:0}

.recognition{padding-bottom:112px}
.section-heading{max-width:var(--max);margin:0 auto 64px;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}
.section-heading h2{grid-column:1/span 6;max-width:13ch;margin:0}.section-heading p{grid-column:8/span 5;color:#b7b7b7;margin:0 0 7px;font-size:15px}
.recognition-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:56px var(--gap)}
.recognition-item{grid-column:span 4;border-top:1px solid var(--line-dark);padding-top:14px}.recognition-item.offset{grid-column:3/span 4}
.recognition-item .num{display:block;margin-bottom:30px;color:var(--red);font-family:var(--display);font-size:20px}
.recognition-item h3{font-size:clamp(22px,1.75vw,28px);max-width:18ch;margin-bottom:14px}
.recognition-item p{color:#a9a9a9;font-size:13.5px;line-height:1.55;max-width:36ch}

.works{padding-bottom:128px}
.works-intro{max-width:var(--max);margin:0 auto 86px;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}
.works-intro h2{grid-column:1/span 7;max-width:17ch;margin:0}.works-intro p{grid-column:9/span 4;max-width:42ch;margin:0 0 6px;font-size:15px}
.case{max-width:var(--max);margin:0 auto 96px;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:stretch}
.case-shot{grid-column:1/span 7;aspect-ratio:1.16/1;min-height:0}.case-copy{grid-column:9/span 4;padding:16px 0;display:flex;flex-direction:column;justify-content:center}
.case-b .case-copy{grid-column:1/span 4}.case-b .case-shot{grid-column:6/span 7;aspect-ratio:1.12/1;min-height:0}.case-c .case-shot{aspect-ratio:1.18/1;min-height:0}
.case-meta{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:26px}
.case-copy h3{font-size:clamp(30px,3vw,46px);max-width:15ch;margin-bottom:18px}.case-copy p{color:#4f4f4f;font-size:14px;line-height:1.58;max-width:42ch}.case-copy .text-link{margin-top:12px;align-self:flex-start}
.works-cta{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line);padding-top:24px;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.works-cta>.btn{grid-column:1/span 3;justify-self:start}.works-cta>div{grid-column:8/span 5;max-width:430px}.works-cta p{font-family:var(--display);text-transform:uppercase;font-size:24px;line-height:1.06;margin-bottom:12px}

.about{padding-bottom:132px}.about-layout{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.about-title{grid-column:1/span 7}.about-title h2{max-width:15ch;margin-bottom:44px}
.about-photo{grid-column:1/span 4;margin-top:10px}.about-copy{grid-column:6/span 6;margin-top:72px;padding-left:0}.about-copy p{max-width:57ch;font-size:15px;line-height:1.62}.about-lead{font-size:clamp(19px,1.7vw,25px)!important;line-height:1.38!important}.about-copy .text-link{margin-top:14px}

.mid-cta{padding-bottom:78px}.mid-cta-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}.mid-cta h2{grid-column:1/span 7;max-width:15ch;margin-bottom:0}.mid-cta-copy{grid-column:9/span 4;padding-bottom:8px}.mid-cta-copy p{max-width:42ch;font-size:14.5px}.mid-cta-copy .btn{margin-top:18px}

.process{padding-bottom:104px}.process-title{max-width:var(--max);margin:0 auto 66px;max-width:min(var(--max),15ch)}
.process-steps{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.process-steps article{grid-column:span 3;min-height:310px;border-top:1px solid var(--line-dark);padding-top:14px;display:flex;flex-direction:column}.process-steps article>span{font-family:var(--display);font-size:44px;color:#555;margin-bottom:auto}.process-steps h3{font-size:24px;max-width:15ch;margin-bottom:13px}.process-steps p{font-size:13px;color:#a8a8a8;line-height:1.55}

.terms{padding-bottom:126px}.terms-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}.terms-intro{grid-column:1/span 5}.terms-intro h2{max-width:14ch}.terms-intro p{max-width:42ch;font-size:14.5px}.terms-list{grid-column:7/span 6}
.terms-list article{display:grid;grid-template-columns:54px 1fr;gap:12px 22px;border-top:1px solid var(--line);padding:19px 0 34px}.terms-list article>span{grid-row:1/3;font-family:var(--display);font-size:19px;color:var(--red)}.terms-list h3{font-size:25px;margin:0;max-width:20ch}.terms-list p{margin:0;color:#555;font-size:13.5px;line-height:1.55}

.contact{padding-bottom:98px}.contact-frame{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}.contact-heading{grid-column:1/span 6;padding-right:20px}.contact-heading h2{max-width:15ch}.contact-heading p{font-size:18px;max-width:42ch}.contact-form{grid-column:8/span 5;padding-top:98px}.contact-form label{display:block;margin-bottom:24px}.contact-form label span{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}.contact-form input{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:12px 0;border-radius:0;outline:none;font-size:18px}.contact-form input:focus{border-bottom-color:var(--red)}.contact-form .btn{margin-top:14px}.form-note{font-size:11.5px;color:#666;margin-top:15px;max-width:40ch}

.footer{padding-bottom:24px}.footer-main{max-width:var(--max);margin:0 auto;min-height:300px;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;padding-bottom:44px}.footer-main>div{grid-column:1/span 7}.footer-big-link{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(54px,7vw,100px);line-height:.9}.footer-main>p{grid-column:9/span 4;max-width:40ch;color:#aaa;font-size:14px}.footer-bottom{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line-dark);padding-top:14px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#8d8d8d;text-transform:uppercase;letter-spacing:.06em;font-size:9px}

@media (max-width:980px){
  .nav{display:none}.topbar{grid-template-columns:1fr 1fr}.topbar-cta{justify-self:end}
  .hero-grid{grid-template-columns:1fr 1fr}.placeholder-person{height:auto;min-height:500px}
  .section-heading h2{grid-column:1/span 7}.section-heading p{grid-column:8/span 5}
  .recognition-item,.recognition-item.offset{grid-column:span 6}
  .works-intro h2{grid-column:1/span 7}.works-intro p{grid-column:8/span 5}
  .case-shot{grid-column:1/span 7}.case-copy{grid-column:8/span 5}.case-b .case-copy{grid-column:1/span 5}.case-b .case-shot{grid-column:6/span 7}
  .about-title{grid-column:1/span 8}.about-photo{grid-column:1/span 5}.about-copy{grid-column:6/span 7;margin-top:40px}
  .mid-cta h2{grid-column:1/span 7}.mid-cta-copy{grid-column:8/span 5}
  .process-steps article{grid-column:span 6;min-height:270px}.terms-intro{grid-column:1/span 5}.terms-list{grid-column:6/span 7}.contact-heading{grid-column:1/span 6}.contact-form{grid-column:7/span 6}
}

@media (max-width:700px){
  :root{--gutter:18px;--gap:18px}.topbar{min-height:54px}
  .hero{min-height:auto;padding-bottom:62px}.hero-grid{display:flex;flex-direction:column;min-height:auto}.hero-copy{order:1}.placeholder-person{order:2;width:100%;min-height:430px}.hero h1{font-size:clamp(50px,14.2vw,70px);max-width:11ch}.hero-lead{font-size:18px}.hero-actions{align-items:flex-start;flex-direction:column}
  .section-heading,.works-intro,.case,.works-cta,.about-layout,.mid-cta-grid,.terms-grid,.contact-frame,.footer-main{display:flex;flex-direction:column}
  .section-heading{gap:24px}.section-heading h2{max-width:11.5ch}.recognition{padding-bottom:82px}.recognition-grid{gap:42px 18px}.recognition-item,.recognition-item.offset{grid-column:span 12}.recognition-item .num{margin-bottom:22px}.recognition-item h3{font-size:25px;max-width:17ch}
  .works{padding-bottom:90px}.works-intro{margin-bottom:58px}.works-intro h2{max-width:12.5ch}.case{margin-bottom:72px;gap:26px}.case-shot,.case-b .case-shot,.case-c .case-shot{width:100%;aspect-ratio:1/1;order:1}.case-copy,.case-b .case-copy{width:100%;order:2;padding:0}.case-copy h3{font-size:34px;max-width:15ch}.works-cta{gap:32px}.works-cta>.btn{align-self:flex-start}
  .about{padding-bottom:90px}.about-title h2{max-width:12.5ch}.about-photo{width:70%;align-self:flex-start;aspect-ratio:3/4;margin:0 0 34px}.about-copy{width:100%;margin:0}
  .mid-cta{padding-bottom:64px}.mid-cta-grid{gap:28px}.mid-cta h2{max-width:12ch}
  .process{padding-bottom:82px}.process-title{margin-bottom:48px;max-width:12ch}.process-steps article{grid-column:span 12;min-height:240px}.process-steps h3{max-width:17ch}
  .terms{padding-bottom:88px}.terms-intro h2{max-width:12ch}.terms-list article{grid-template-columns:46px 1fr}
  .contact{padding-bottom:78px}.contact-heading h2{max-width:12ch}.contact-form{padding-top:18px;width:100%}.footer-main{min-height:300px;gap:38px}
}

/* v3 — refined editorial grid and composition */
@media (min-width: 701px){
  /* Section labels share the same inner left edge as the 12-column content grid */
  main > section > .eyebrow,
  .footer-main .eyebrow{
    width:100%;
    max-width:var(--max);
    margin-left:auto;
    margin-right:auto;
  }

  /* Hero: three deliberate display lines, not a narrow text tower */
  .hero-grid{grid-template-columns:7.2fr 4.8fr;align-items:center}
  .hero h1{
    max-width:none;
    width:min(100%, 850px);
    font-size:clamp(64px,5.9vw,88px);
    line-height:.92;
    letter-spacing:-.045em;
  }
  .hero h1 span{display:block}
  .placeholder-person{height:min(64vh,610px);min-height:500px}

  /* Recognition: stable 3 × 2 matrix. Asymmetry comes from typography, not broken placement. */
  .section-heading h2{grid-column:1/span 7;max-width:none}
  .section-heading p{grid-column:9/span 4}
  .recognition-grid{row-gap:66px}
  .recognition-item,
  .recognition-item.offset{
    grid-column:span 4;
    min-height:260px;
    display:flex;
    flex-direction:column;
  }
  .recognition-item .num{margin-bottom:34px}
  .recognition-item h3{max-width:24ch;font-size:clamp(21px,1.55vw,26px)}
  .recognition-item p{margin-top:auto;max-width:42ch}

  /* Projects intro follows the visual width of the large case image. */
  .works-intro h2{grid-column:1/span 8;max-width:23ch}
  .works-intro p{grid-column:9/span 4}

  /* Case copy gets a real five-column text area. */
  .case-shot{grid-column:1/span 7}
  .case-copy{grid-column:8/span 5;padding-left:clamp(12px,1.6vw,26px)}
  .case-b .case-copy{grid-column:1/span 5;padding-left:0;padding-right:clamp(12px,1.6vw,26px)}
  .case-b .case-shot{grid-column:6/span 7}
  .case-copy h3{font-size:clamp(30px,2.45vw,40px);max-width:22ch;line-height:.98}
  .case-copy p{max-width:52ch}

  .works-cta>.btn{grid-column:1/span 3}
  .works-cta>div{grid-column:5/span 8;max-width:none;display:flex;align-items:baseline;justify-content:space-between;gap:28px}
  .works-cta p{font-size:22px;white-space:nowrap;margin:0}
  .works-cta .text-link{white-space:nowrap}

  /* About title is deliberately two lines. */
  .about-title{grid-column:1/span 9}
  .about-title h2{max-width:none;font-size:clamp(44px,4.15vw,62px);line-height:.96}

  /* Process: two-line title and equal text widths inside all four steps. */
  .process-title{max-width:var(--max);width:100%;font-size:clamp(44px,4.15vw,62px)}
  .process-steps article{min-height:300px}
  .process-steps h3{max-width:none;width:100%;font-size:clamp(21px,1.55vw,25px);line-height:1.02}
  .process-steps p{max-width:none;width:100%}

  /* First step gets a stronger editorial panel. */
  .contact{padding-top:72px;padding-bottom:112px}
  .contact-frame{
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    background:#f7f6f2;
    min-height:560px;
  }
  .contact-heading{
    position:relative;
    grid-column:1/span 7;
    padding:0 clamp(34px,4vw,62px) 54px;
    background:var(--red);
    color:#fff;
    min-height:560px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .contact-heading:after{
    content:'01';
    position:absolute;
    right:26px;
    top:24px;
    font-family:var(--display);
    font-size:clamp(90px,10vw,150px);
    line-height:.8;
    color:rgba(255,255,255,.14);
  }
  .contact-heading .eyebrow{position:absolute;top:0;left:clamp(34px,4vw,62px);padding-top:28px;margin:0;color:rgba(255,255,255,.72)}
  .contact-heading h2{max-width:14ch;font-size:clamp(46px,4.5vw,68px);margin-bottom:28px}
  .contact-heading p{color:rgba(255,255,255,.88);max-width:46ch;margin-bottom:0}
  .contact-form{grid-column:8/span 5;padding:72px clamp(28px,3vw,48px) 54px}
  .contact-form input{font-size:20px;padding:16px 0}

  /* Two contact channels in the footer. */
  .footer-main>div{grid-column:1/span 8}
  .footer-main>p{grid-column:9/span 4}
  .footer-links{display:flex;flex-wrap:wrap;gap:12px 44px;align-items:baseline}
  .footer-big-link{font-size:clamp(52px,5.5vw,82px)}
}

/* Buttons: graphic split-button treatment, still restrained and square. */
.btn{
  gap:18px;
  padding-left:20px;
  padding-right:0;
  overflow:hidden;
  box-shadow:none;
}
.btn::after{
  content:'↗';
  align-self:stretch;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid currentColor;
  font-size:16px;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover::after{transform:translate(2px,-2px)}
.btn-red::after{border-left-color:rgba(255,255,255,.45);background:rgba(0,0,0,.09)}
.btn-light::after{border-left-color:rgba(23,23,23,.2);background:rgba(23,23,23,.06)}
.btn-outline-dark::after{background:var(--ink);color:#fff;border-left-color:var(--ink)}
.btn-outline-dark:hover::after{background:var(--red);border-left-color:var(--red)}

@media (max-width:700px){
  .hero h1 br,.section-heading h2 br,.about-title h2 br,.process-title br{display:none}
  .recognition-item{min-height:0}
  .works-cta>div{display:block}
  .works-cta p{white-space:normal}
  .contact{padding-top:36px}
  .contact-frame{border:1px solid var(--line);display:block;min-height:0}
  .contact-heading{min-height:460px;padding:0 22px 34px;background:var(--red);color:#fff}
  .contact-heading .eyebrow{left:22px}
  .contact-heading h2{font-size:clamp(44px,12vw,58px)}
  .contact-form{padding:38px 22px 34px}
  .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .footer-big-link{font-size:clamp(52px,15vw,74px)}
}


/* ===== refinement v4 ===== */

.hero .hero-grid{
  min-height:calc(100vh - 100px);
  align-items:center;
}
.hero-copy{
  padding-top:24px;
}
.hero h1{
  max-width:none;
  width:min(860px,100%);
  font-size:clamp(56px,7.3vw,112px);
  line-height:.91;
  margin-bottom:26px;
}
.hero-title-main{
  display:block;
  color:var(--ink) !important;
}
.hero h1 > span:last-child{
  display:block;
  color:var(--red);
}
.hero-note-one-line{
  width:auto;
  max-width:none;
  white-space:nowrap;
  font-size:14px;
}
.hero-marker{display:none!important}

.works-intro{
  grid-template-columns:minmax(0,7.2fr) minmax(380px,4.8fr);
}
.works-intro p{
  max-width:58ch;
  width:100%;
}

/* process: equal vertical rhythm */
.process-steps{
  align-items:stretch;
}
.process-steps article{
  display:grid;
  grid-template-rows:90px 92px auto;
  min-height:0;
  gap:0;
}
.process-steps article>span{
  margin:0;
  align-self:start;
}
.process-steps h3{
  margin:0;
  align-self:start;
  max-width:none;
  width:100%;
  padding-right:10px;
}
.process-steps p{
  margin:0;
  align-self:start;
  max-width:none;
  width:100%;
  padding-right:14px;
}

/* terms: stronger editorial composition */
.terms-enhanced{
  padding-top:26px;
  background:
    linear-gradient(to bottom, rgba(23,23,23,.035) 1px, transparent 1px) 0 0/100% 86px,
    var(--paper);
}
.terms-enhanced .terms-grid{
  position:relative;
  grid-template-columns:minmax(0,5.4fr) minmax(28px,.6fr) minmax(0,6fr);
  align-items:start;
}
.terms-kicker{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.07em;
  color:var(--red);
  margin-bottom:26px;
}
.terms-enhanced .terms-intro{
  position:sticky;
  top:96px;
  padding-right:clamp(10px,3vw,44px);
}
.terms-enhanced .terms-intro h2{
  max-width:11.5ch;
  margin-bottom:30px;
}
.terms-enhanced .terms-intro p{
  max-width:52ch;
  font-size:18px;
}
.terms-enhanced .terms-list{
  border-left:1px solid var(--line);
  padding-left:clamp(20px,2.6vw,40px);
}
.terms-enhanced .terms-list article{
  grid-template-columns:54px minmax(0,1fr);
  padding:28px 0 38px;
  position:relative;
}
.terms-enhanced .terms-list article::after{
  content:"↘";
  position:absolute;
  right:0;
  top:24px;
  font-size:18px;
  color:#9a9a9a;
}
.terms-enhanced .terms-list article>span{
  font-size:30px;
}
.terms-enhanced .terms-list h3{
  font-size:clamp(28px,2.5vw,38px);
  max-width:19ch;
  padding-right:42px;
}
.terms-enhanced .terms-list p{
  max-width:58ch;
  padding-right:44px;
}

/* first step: visual emphasis */
.contact-enhanced{
  padding-top:36px;
  padding-bottom:120px;
}
.contact-enhanced .contact-frame{
  position:relative;
  border-top:none;
  background:var(--red);
  color:#fff;
  min-height:620px;
  overflow:hidden;
}
.contact-enhanced .contact-heading{
  position:relative;
  padding:0 clamp(30px,4vw,66px) 54px;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.contact-enhanced .contact-heading .eyebrow{
  position:absolute;
  top:0;
  left:clamp(30px,4vw,66px);
  padding-top:28px;
  color:rgba(255,255,255,.8);
}
.contact-big-index{
  position:absolute;
  right:26px;
  top:4px;
  font-family:var(--display);
  font-size:clamp(140px,16vw,260px);
  line-height:.8;
  color:rgba(255,255,255,.12);
  pointer-events:none;
}
.contact-enhanced .contact-heading h2{
  max-width:8.9ch;
  font-size:clamp(48px,6vw,88px);
  margin-bottom:26px;
  position:relative;
  z-index:1;
}
.contact-enhanced .contact-heading p{
  max-width:48ch;
  color:rgba(255,255,255,.88);
  position:relative;
  z-index:1;
}
.contact-enhanced .contact-form{
  background:var(--paper);
  color:var(--ink);
  padding:72px clamp(28px,4vw,62px);
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-enhanced .contact-form::before{
  content:"РАССКАЖИТЕ О ЗАДАЧЕ";
  font-family:var(--display);
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  margin-bottom:50px;
}
.contact-enhanced .contact-form input{
  font-size:22px;
  padding:16px 0;
}
.contact-enhanced .contact-form .btn{
  align-self:flex-start;
  min-width:240px;
  margin-top:22px;
}
.contact-enhanced .form-note{
  margin-top:22px;
  max-width:48ch;
}

/* responsive tuning */
@media (max-width: 980px){
  .hero-note-one-line{
    white-space:normal;
  }
  .process-steps article{
    grid-template-rows:82px 88px auto;
  }
  .terms-enhanced .terms-intro{
    position:static;
  }
  .terms-enhanced .terms-list{
    border-left:none;
    padding-left:0;
  }
  .contact-enhanced .contact-frame{
    grid-template-columns:1fr;
  }
  .contact-enhanced .contact-heading{
    min-height:520px;
  }
}
@media (max-width:640px){
  .hero h1{
    font-size:clamp(50px,15vw,72px);
  }
  .hero-title-main br{display:none}
  .hero-title-main{
    max-width:8.8ch;
  }
  .hero-note-one-line{
    font-size:13px;
  }
  .works-intro{
    grid-template-columns:1fr;
  }
  .process-steps article{
    grid-template-rows:auto auto auto;
    gap:18px;
  }
  .process-steps article>span{
    margin-bottom:14px;
  }
  .contact-enhanced{
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
  }
  .contact-enhanced .contact-heading{
    padding-left:18px;
    padding-right:18px;
    min-height:500px;
  }
  .contact-enhanced .contact-heading .eyebrow{
    left:18px;
  }
  .contact-enhanced .contact-form{
    padding:52px 18px 64px;
  }
}


/* ===== refinement v5: reference colors + controlled wrapping ===== */

:root{
  --paper:#ededed;
  --paper-2:#e2e2e2;
  --ink:#2d2d2d;
  --ink-2:#2c2c2c;
  --red:#c45959;
  --line:rgba(45,45,45,.18);
  --line-dark:rgba(255,255,255,.16);
}

body,
.section-light{
  background:var(--paper);
}
.section-dark,
.footer{
  background:var(--ink-2);
}
.topbar{
  background:rgba(44,44,44,.98);
}
.section-red{
  background:var(--red);
}

/* Hero: exactly two lines for the main question on desktop */
.hero h1{
  width:min(980px,100%);
  max-width:none;
  font-size:clamp(58px,6.35vw,98px);
  line-height:.92;
}
.hero-title-main{
  max-width:none !important;
}
.forced-line{
  display:block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
}

/* Smaller placeholder labels */
.placeholder{
  font-size:10px;
  line-height:1.35;
  letter-spacing:.08em;
}
.case-shot span{
  font-size:9px;
}

/* Terms: flat background, no stripes */
.terms-enhanced{
  background:var(--paper) !important;
}
.terms-enhanced::before,
.terms-enhanced::after{
  display:none !important;
}

/* Controlled two-line headings */
.two-line-heading{
  max-width:none !important;
  width:100%;
}
.two-line-heading > span{
  display:block;
  white-space:nowrap;
}
.terms-enhanced .terms-intro h2{
  font-size:clamp(44px,4.25vw,68px);
  line-height:.95;
  max-width:none;
}
.contact-enhanced .contact-heading h2{
  font-size:clamp(46px,4.9vw,76px);
  line-height:.94;
  max-width:none;
}

/* First step: remove decorative number and keep cleaner reference-like contrast */
.contact-big-index{
  display:none !important;
}
.contact-enhanced .contact-frame{
  background:var(--red);
}
.contact-enhanced .contact-form{
  background:var(--paper);
}

/* Keep reference-like neutral placeholder fields */
.placeholder{
  background:
    linear-gradient(135deg, rgba(45,45,45,.035) 25%, transparent 25%) 0 0/28px 28px,
    linear-gradient(315deg, rgba(45,45,45,.035) 25%, transparent 25%) 0 0/28px 28px,
    var(--paper-2);
}

@media (max-width:980px){
  .forced-line,
  .two-line-heading > span{
    white-space:normal;
    width:auto;
  }
}


/* ===== refinement v6: real hero photo ===== */
.hero-photo-wrap{
  position:relative;
  min-height:650px;
  align-self:end;
  overflow:visible;
}
.hero-photo{
  display:block;
  width:min(100%,620px);
  height:auto;
  margin-left:auto;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.08));
}
@media (max-width:980px){
  .hero-photo-wrap{
    min-height:auto;
  }
  .hero-photo{
    width:min(88%,560px);
    margin:0 auto;
  }
}
@media (max-width:640px){
  .hero-photo{
    width:100%;
  }
}


/* ===== refinement v7 ===== */

/* Header */
.topbar{
  grid-template-columns:minmax(220px,1fr) auto minmax(190px,1fr);
  gap:30px;
  padding-inline:var(--gutter);
}
.brand-full{
  font-size:12px;
  white-space:nowrap;
  letter-spacing:.045em;
}
.nav{
  gap:24px;
}
.btn-header{
  justify-self:end;
  display:inline-grid;
  grid-template-columns:auto 34px;
  align-items:center;
  gap:12px;
  padding:0 0 0 16px;
  min-height:36px;
  border:1px solid rgba(255,255,255,.42);
  opacity:1;
}
.btn-header b{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-left:1px solid rgba(255,255,255,.32);
  font-size:15px;
  font-weight:400;
}

/* Hero */
.hero-title-dark{
  color:var(--ink)!important;
}
.hero-title-accent{
  display:block;
  color:var(--red)!important;
}
.hero-grid{
  grid-template-columns:minmax(0,7.2fr) minmax(360px,4.8fr);
}
.hero-copy{
  min-width:0;
}
.hero h1{
  width:min(1050px,100%);
}
.hero-note-one-line{
  max-width:100%;
}

/* Wider red CTA heading */
.mid-cta-grid{
  grid-template-columns:minmax(0,7.6fr) minmax(330px,4.4fr);
}
.mid-cta-title-wide{
  max-width:13ch!important;
  width:100%;
}

/* Recognition: intentional staggered grid, not broken-looking */
.recognition-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  row-gap:64px;
}
.recognition-item{
  grid-column:span 4;
}
.recognition-item:nth-child(2),
.recognition-item:nth-child(4),
.recognition-item:nth-child(6){
  transform:translateY(34px);
}
.recognition-item.offset{
  grid-column:span 4;
}

/* Projects: fewer lines */
.projects-heading{
  max-width:16ch!important;
  width:100%;
}
.projects-heading > span{
  display:block;
}
.works-intro{
  grid-template-columns:minmax(0,7.8fr) minmax(360px,4.2fr);
}

/* First step: prevent overflow */
.contact-enhanced .contact-heading{
  min-width:0;
}
.contact-enhanced .contact-heading h2{
  width:100%;
  max-width:100%!important;
  font-size:clamp(44px,4.45vw,70px);
}
.contact-two-line > span{
  display:block;
  white-space:nowrap;
}
.contact-enhanced .contact-frame{
  grid-template-columns:minmax(0,7fr) minmax(360px,5fr);
}

/* Footer social icons */
.footer-contact-side{
  align-self:end;
}
.footer-contact-side p{
  max-width:42ch;
  color:#aaa;
}
.social-links{
  display:flex;
  gap:10px;
  margin-top:24px;
}
.social-links a{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.28);
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:14px;
  transition:.2s ease;
}
.social-links a:hover{
  background:var(--red);
  border-color:var(--red);
}

/* Guard rails against horizontal overflow */
html,body{
  overflow-x:hidden;
}
h1,h2,h3,p,
.hero-copy,.case-copy,.about-copy,.contact-heading,.terms-intro{
  min-width:0;
}
h1,h2,h3{
  overflow-wrap:normal;
  word-break:normal;
}

/* Mobile */
@media (max-width:980px){
  .topbar{
    grid-template-columns:1fr auto;
  }
  .nav{
    display:none;
  }
  .hero-grid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-copy{
    order:1;
    width:100%;
  }
  .hero-photo-wrap{
    order:2;
    width:100%;
  }
  .recognition-item:nth-child(2),
  .recognition-item:nth-child(4),
  .recognition-item:nth-child(6){
    transform:none;
  }
  .mid-cta-grid,
  .contact-enhanced .contact-frame{
    grid-template-columns:1fr;
  }
  .contact-two-line > span{
    white-space:normal;
  }
}

@media (max-width:640px){
  .topbar{
    padding-inline:18px;
  }
  .brand-full{
    font-size:10px;
    max-width:150px;
    white-space:normal;
    line-height:1.15;
  }
  .btn-header{
    min-height:34px;
    padding-left:12px;
    grid-template-columns:auto 30px;
    font-size:10px;
  }
  .btn-header b{
    width:30px;
    height:32px;
  }

  /* left edge aligns with body copy */
  .hero,
  .recognition,
  .works,
  .about,
  .mid-cta,
  .process,
  .terms,
  .footer{
    padding-left:18px;
    padding-right:18px;
  }

  .hero h1{
    font-size:clamp(44px,13.2vw,64px);
    line-height:.93;
    max-width:100%;
  }
  .forced-line{
    white-space:normal;
    width:auto;
  }
  .hero-title-main,
  .hero-title-accent{
    max-width:100%!important;
  }
  .hero-lead,
  .hero-note{
    width:100%;
    max-width:100%;
  }

  .recognition-grid{
    grid-template-columns:1fr;
  }
  .recognition-item,
  .recognition-item.offset{
    grid-column:auto;
    width:100%;
  }

  .projects-heading{
    max-width:100%!important;
    font-size:clamp(40px,11.5vw,56px);
  }
  .projects-heading > span{
    display:inline;
  }

  .mid-cta-title-wide{
    max-width:100%!important;
    font-size:clamp(42px,11.5vw,58px);
  }

  .contact-enhanced{
    padding-left:0;
    padding-right:0;
  }
  .contact-enhanced .contact-heading{
    padding-left:18px;
    padding-right:18px;
  }
  .contact-enhanced .contact-heading h2{
    font-size:clamp(42px,11.2vw,56px);
    line-height:.95;
    max-width:100%!important;
  }

  .footer-main{
    grid-template-columns:1fr;
    gap:38px;
  }
}


/* ===== refinement v8: supplied visual placeholders ===== */
.visual-placeholder{
  position:relative;
  overflow:hidden;
  background:#ddd;
  border:0;
}
.visual-placeholder img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.case-a .visual-placeholder img{
  object-position:center 48%;
}
.case-b .visual-placeholder img{
  object-position:center 50%;
}
.case-c .visual-placeholder img{
  object-position:center 42%;
}
.visual-placeholder-tall{
  min-height:620px;
}
.visual-placeholder-tall img{
  object-position:center center;
}

/* extra reference placeholders: editorial rather than card-like */
.visual-pair{
  max-width:var(--max);
  margin:20px auto 150px;
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(240px,4fr);
  gap:24px;
  align-items:end;
}
.visual-pair-item{
  overflow:hidden;
  background:#ddd;
}
.visual-pair-wide{
  height:420px;
}
.visual-pair-narrow{
  height:310px;
}
.visual-pair-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.visual-pair-wide img{
  object-position:center 54%;
}
.visual-pair-narrow img{
  object-position:center 45%;
}

@media (max-width:980px){
  .visual-pair{
    grid-template-columns:1fr 1fr;
    margin-bottom:110px;
  }
  .visual-pair-wide,
  .visual-pair-narrow{
    height:320px;
  }
}

@media (max-width:640px){
  .visual-placeholder-tall{
    min-height:500px;
  }
  .visual-pair{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:90px;
  }
  .visual-pair-wide{
    height:300px;
  }
  .visual-pair-narrow{
    height:250px;
    width:72%;
    margin-left:auto;
  }
}


/* ===== refinement v9: audit fixes ===== */

/* The question itself is ALWAYS dark; only the promise is red. */
.hero h1 .hero-title-main,
.hero h1 .hero-title-main span,
.hero h1 .hero-title-dark,
.hero h1 .hero-title-dark span{
  color:var(--ink) !important;
}
.hero h1 .hero-title-accent{
  color:var(--red) !important;
}

/* CTA statement gets enough measure to feel intentional, not stacked. */
.mid-cta-title-wide{
  max-width:16.5ch !important;
  width:100%;
  font-size:clamp(44px,4.75vw,72px);
}

/* Projects intro: fewer lines on desktop. */
.works-intro{
  grid-template-columns:minmax(0,8.35fr) minmax(340px,3.65fr);
}
.projects-heading{
  max-width:none !important;
  width:100%;
  font-size:clamp(44px,4.55vw,70px);
}
.projects-heading > span{
  display:block;
  white-space:nowrap;
}

/* First-step heading: remain inside its column at all desktop widths. */
.contact-enhanced .contact-heading h2.contact-two-line{
  font-size:clamp(42px,4.05vw,64px);
  letter-spacing:-.04em;
}
.contact-two-line > span{
  max-width:100%;
}

/* Real icon treatment */
.social-links a{
  color:#fff;
}
.social-links svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}

/* Explicit desktop stagger, while keeping a clean 3-column grid. */
@media (min-width:981px){
  .recognition-item:nth-child(2),
  .recognition-item:nth-child(4),
  .recognition-item:nth-child(6){
    transform:translateY(32px);
  }
}

/* Mobile safety: text first, image second; all display lines may wrap naturally. */
@media (max-width:980px){
  .hero-copy{order:1!important}
  .hero-photo-wrap{order:2!important}

  .projects-heading > span,
  .contact-two-line > span,
  .two-line-heading > span,
  .forced-line{
    white-space:normal;
    width:auto;
  }

  .projects-heading,
  .mid-cta-title-wide,
  .contact-enhanced .contact-heading h2.contact-two-line{
    max-width:100%!important;
  }
}

@media (max-width:640px){
  .hero-copy,
  .section-heading,
  .works-intro,
  .case-copy,
  .about-title,
  .about-copy,
  .mid-cta-grid,
  .process-title,
  .terms-grid,
  .footer-main{
    margin-left:0;
    margin-right:0;
  }

  .projects-heading{
    font-size:clamp(38px,10.7vw,52px);
  }

  .mid-cta-title-wide{
    font-size:clamp(40px,10.8vw,54px);
  }

  .contact-enhanced .contact-heading h2.contact-two-line{
    font-size:clamp(40px,10.5vw,52px);
  }
}


/* ===== refinement v10: typography, recognition grid, projects, contacts ===== */

/* 1. Hero promise stays on ONE line on desktop */
.hero-title-accent{
  display:block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
}

/* 2. More breathing room in display typography:
   prevents Ё / Й accents from visually colliding with the line above */
h1{
  line-height:1.00;
}
h2{
  line-height:1.02;
}
h3{
  line-height:1.04;
}
.hero h1{
  line-height:.98;
}
.section-heading h2,
.projects-heading,
.about-title h2,
.mid-cta h2,
.process-title,
.terms-intro h2,
.contact-heading h2{
  line-height:1.01;
}

/* 3. Recognition: deliberately broken editorial grid */
.recognition{
  padding-bottom:170px;
}
.recognition .eyebrow,
.recognition .section-heading,
.recognition .recognition-grid{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}
.recognition .eyebrow{
  padding-left:0;
}
.recognition .section-heading{
  margin-bottom:96px;
}
.recognition-grid{
  column-gap:32px;
  row-gap:112px;
  align-items:start;
}
.recognition-item{
  grid-column:span 4;
  padding-top:18px;
}
.recognition-item:nth-child(2){
  transform:translateY(62px);
}
.recognition-item:nth-child(4){
  transform:translateY(42px);
}
.recognition-item:nth-child(6){
  transform:translateY(82px);
}
.recognition-item .num{
  margin-bottom:34px;
}
.recognition-item h3{
  max-width:18ch;
}

/* 4. Projects intro:
   heading stays as-is, paragraph moves down and gets its own clear area */
.works-intro{
  align-items:start;
  margin-bottom:74px;
}
.works-intro .projects-heading{
  grid-column:1/span 8;
  margin:0;
}
.works-intro > p{
  grid-column:9/span 4;
  margin-top:86px;
  margin-bottom:0;
  max-width:50ch;
  font-size:15px;
  line-height:1.6;
}

/* 5. Projects: smaller images, tighter case rhythm */
.case,
.case-b{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;
  margin-bottom:96px;
  align-items:center;
}
.case-a .case-shot,
.case-c .case-shot{
  grid-column:1/span 7;
}
.case-a .case-copy,
.case-c .case-copy{
  grid-column:9/span 4;
}
.case-b .case-copy{
  grid-column:1/span 4;
}
.case-b .case-shot{
  grid-column:6/span 7;
}
.case-shot,
.case-b .case-shot,
.case-c .case-shot{
  min-height:0;
  height:auto;
  aspect-ratio:4/3;
}
.case-copy{
  padding:0;
}
.case-copy h3{
  max-width:16ch;
  font-size:clamp(30px,3vw,46px);
  line-height:1.03;
}
.case-copy p{
  line-height:1.55;
}
.visual-pair{
  margin-top:0;
  margin-bottom:110px;
}
.visual-pair-wide{
  height:330px;
}
.visual-pair-narrow{
  height:260px;
}

/* 6. Contacts: explicit two-column composition */
.footer-main{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:32px !important;
  align-items:end;
  min-height:330px;
}
.footer-main > div:first-child{
  grid-column:1/span 6 !important;
  width:100%;
}
.footer-contact-side{
  grid-column:8/span 5 !important;
  width:100%;
  align-self:end;
}
.footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.footer-big-link{
  line-height:.94;
}
.footer-contact-side p{
  margin:0;
  max-width:42ch;
  line-height:1.55;
}
.social-links{
  margin-top:28px;
}

/* ===== tablet ===== */
@media (max-width:980px) and (min-width:641px){
  .recognition-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:76px 28px;
  }
  .recognition-item,
  .recognition-item.offset{
    grid-column:auto;
  }
  .recognition-item:nth-child(2),
  .recognition-item:nth-child(4),
  .recognition-item:nth-child(6){
    transform:translateY(44px);
  }

  .case,
  .case-b{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .case-a .case-shot,
  .case-c .case-shot,
  .case-a .case-copy,
  .case-c .case-copy,
  .case-b .case-shot,
  .case-b .case-copy{
    grid-column:auto;
  }

  .footer-main{
    grid-template-columns:1fr 1fr !important;
    gap:48px !important;
  }
  .footer-main > div:first-child,
  .footer-contact-side{
    grid-column:auto !important;
  }
}

/* ===== mobile ===== */
@media (max-width:640px){
  /* Header/display text never drifts off-grid */
  .recognition .eyebrow,
  .recognition .section-heading,
  .recognition .recognition-grid,
  .footer-main,
  .footer-bottom{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }

  .recognition{
    padding-left:18px;
    padding-right:18px;
    padding-bottom:110px;
  }
  .recognition .section-heading{
    display:block;
    margin:0 0 58px;
  }
  .recognition .section-heading h2{
    max-width:100%;
    margin-left:0;
    margin-right:0;
    font-size:clamp(38px,10.5vw,50px);
  }
  .recognition .section-heading p{
    max-width:100%;
    margin:24px 0 0;
  }

  /* Asked-for multi-column mobile grid */
  .recognition-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:62px 18px;
  }
  .recognition-item,
  .recognition-item.offset{
    grid-column:auto !important;
    width:auto;
    min-width:0;
  }
  .recognition-item:nth-child(2){
    transform:translateY(34px);
  }
  .recognition-item:nth-child(4){
    transform:translateY(20px);
  }
  .recognition-item:nth-child(6){
    transform:translateY(42px);
  }
  .recognition-item .num{
    margin-bottom:18px;
  }
  .recognition-item h3{
    font-size:clamp(20px,5.7vw,25px);
    line-height:1.06;
    max-width:none;
  }
  .recognition-item p{
    font-size:12px;
    line-height:1.5;
  }

  /* Hero promise may scale but remains one line */
  .hero-title-accent{
    font-size:.88em;
    white-space:nowrap;
  }

  /* Projects intro no overlap on mobile */
  .works-intro{
    display:block !important;
    margin-bottom:54px;
  }
  .works-intro .projects-heading{
    width:100%;
    margin:0;
  }
  .works-intro > p{
    margin:30px 0 0;
    width:100%;
    max-width:100%;
  }

  /* Compact project scenes */
  .case,
  .case-b{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px;
    margin-bottom:66px;
  }
  .case-a .case-shot,
  .case-c .case-shot,
  .case-a .case-copy,
  .case-c .case-copy,
  .case-b .case-shot,
  .case-b .case-copy{
    grid-column:auto;
  }
  .case-shot,
  .case-b .case-shot,
  .case-c .case-shot{
    aspect-ratio:4/3;
    width:100%;
  }
  .case-b .case-shot{order:1}
  .case-b .case-copy{order:2}

  /* Contacts: still visually two columns on mobile where width permits,
     but kept on the same left grid edge */
  .footer{
    padding-left:18px;
    padding-right:18px;
  }
  .footer-main{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:18px !important;
    align-items:start;
    min-height:0;
    padding-bottom:48px;
  }
  .footer-main > div:first-child,
  .footer-contact-side{
    grid-column:auto !important;
    width:auto;
    min-width:0;
    margin:0;
  }
  .footer-main .eyebrow{
    margin-left:0;
    padding-left:0;
  }
  .footer-big-link{
    font-size:clamp(34px,10vw,48px);
    white-space:nowrap;
  }
  .footer-contact-side p{
    font-size:12px;
    line-height:1.5;
    margin-top:52px;
  }
  .social-links{
    margin-top:18px;
    gap:7px;
    flex-wrap:wrap;
  }
  .social-links a{
    width:36px;
    height:36px;
  }
}

/* Extra narrow screens: protect two-column mobile blocks */
@media (max-width:390px){
  .recognition-grid{
    gap-left:14px;
    column-gap:14px;
  }
  .recognition-item h3{
    font-size:19px;
  }
  .recognition-item p{
    font-size:11px;
  }
  .footer-big-link{
    font-size:32px;
  }
}


/* ===== refinement v11: recognition composition + about photo ===== */

/* More breathing room in all major headings so Й / Ё don't collide */
h1{line-height:1.06 !important;}
h2{line-height:1.08 !important;}
h3{line-height:1.10 !important;}
.hero h1{line-height:1.04 !important;}
.section-heading h2,
.projects-heading,
.about-title h2,
.mid-cta h2,
.process-title,
.terms-intro h2,
.contact-heading h2{
  line-height:1.08 !important;
}

/* / УЗНАЁТЕ СЕБЯ? / -> 2 per row, vertical rhythm, ragged but intentional */
.recognition{
  padding-bottom:140px;
}
.recognition .section-heading{
  align-items:start;
  margin-bottom:74px;
}
.recognition-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:72px var(--gap);
  align-items:start;
}
.recognition-item{
  position:relative;
  grid-column:span 6 !important;
  min-height:270px;
  border-top:1px solid var(--line-dark);
  padding:18px 0 12px;
  overflow:visible;
}
.recognition-copy{
  position:relative;
  z-index:2;
  max-width:430px;
}
.recognition-item .num{
  display:block;
  margin-bottom:24px;
  color:var(--red);
  font-family:var(--display);
  font-size:20px;
}
.recognition-item h3{
  font-size:clamp(26px,2.05vw,36px);
  line-height:1.12 !important;
  margin:0 0 18px;
  max-width:14.5ch;
}
.recognition-item p{
  margin:0;
  color:#a9a9a9;
  font-size:14px;
  line-height:1.6;
  max-width:31ch;
}
.recognition-art{
  position:absolute;
  z-index:1;
  right:14px;
  bottom:-8px;
  width:132px;
  height:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
  pointer-events:none;
}
.recognition-item-1{transform:translateY(0);}
.recognition-item-2{transform:translateY(26px);}
.recognition-item-3{transform:translateY(-10px);}
.recognition-item-4{transform:translateY(22px);}
.recognition-item-5{transform:translateY(-8px);}
.recognition-item-6{transform:translateY(28px);}
.recognition-art-1{right:18px; bottom:4px; width:140px;}
.recognition-art-2{right:24px; bottom:18px; width:126px;}
.recognition-art-3{right:4px; bottom:12px; width:114px;}
.recognition-art-4{right:20px; bottom:-2px; width:144px;}
.recognition-art-5{right:36px; bottom:10px; width:128px;}
.recognition-art-6{right:12px; bottom:8px; width:134px;}

/* More space after "Все проекты" before decorative images */
.works-cta{
  margin-bottom:64px;
}
.visual-pair{
  margin-top:20px;
}

/* About: use provided image instead of placeholder */
.about{
  padding-top:8px;
}
.about-photo-real{
  grid-column:1/span 4;
  margin-top:6px;
  align-self:start;
}
.about-photo-real img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.10));
}
.about-title h2{
  margin-bottom:56px;
}
.about-copy{
  margin-top:64px;
}

/* Tablet */
@media (max-width:980px){
  .recognition-grid{
    gap:52px var(--gap);
  }
  .recognition-item{
    min-height:250px;
  }
  .recognition-copy{
    max-width:360px;
  }
  .recognition-item h3{
    font-size:clamp(24px,2.3vw,30px);
  }
  .recognition-art{
    width:118px;
  }
  .recognition-art-1{width:126px;}
  .recognition-art-4{width:128px;}
  .about-photo-real{
    grid-column:1/span 5;
  }
}

/* Mobile */
@media (max-width:700px){
  h1{line-height:1.08 !important;}
  h2{line-height:1.10 !important;}
  h3{line-height:1.12 !important;}

  .recognition .section-heading{
    margin-bottom:48px;
  }
  .recognition-grid{
    display:grid !important;
    grid-template-columns:1fr;
    gap:32px;
  }
  .recognition-item{
    grid-column:auto !important;
    transform:none !important;
    min-height:0;
    padding:16px 0 22px;
  }
  .recognition-copy{
    max-width:100%;
    padding-right:126px;
  }
  .recognition-item h3{
    max-width:11.5ch;
    font-size:clamp(24px,7.1vw,34px);
    margin-bottom:14px;
  }
  .recognition-item p{
    max-width:100%;
  }
  .recognition-art{
    width:96px !important;
    right:0;
    bottom:6px;
    opacity:.98;
  }

  .works-cta{
    margin-bottom:42px;
  }
  .visual-pair{
    margin-top:6px;
  }
  .about-photo-real img{
    max-width:74%;
  }
}


/* ===== refinement v12: recognition as a 3-slot grid, 2 cards used per row ===== */

/*
Desktop logic:
row 1: [01] [empty] [02]
row 2: [03] [04]    [empty]
row 3: [empty] [05] [06]

Each card keeps a one-third-grid width, so the section feels like a 3-card system
even though only two cards are used on each row.
*/
@media (min-width:981px){
  .recognition-grid{
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gap);
    row-gap:92px;
    align-items:start;
  }

  .recognition-item{
    grid-column:span 4 !important;
    transform:none !important;
    min-height:255px;
    align-self:start;
  }

  .recognition-item-1{
    grid-column:1 / span 4 !important;
    grid-row:1;
  }
  .recognition-item-2{
    grid-column:9 / span 4 !important;
    grid-row:1;
  }

  .recognition-item-3{
    grid-column:1 / span 4 !important;
    grid-row:2;
  }
  .recognition-item-4{
    grid-column:5 / span 4 !important;
    grid-row:2;
  }

  .recognition-item-5{
    grid-column:5 / span 4 !important;
    grid-row:3;
  }
  .recognition-item-6{
    grid-column:9 / span 4 !important;
    grid-row:3;
  }

  .recognition-copy{
    max-width:100%;
  }

  .recognition-item h3{
    max-width:15ch;
  }

  .recognition-item p{
    max-width:32ch;
  }

  /* Art sits partly in the unused grid space, not inside the text column */
  .recognition-art{
    z-index:1;
    opacity:.96;
  }

  .recognition-art-1{
    right:-72px;
    bottom:8px;
    width:128px;
  }
  .recognition-art-2{
    left:-86px;
    right:auto;
    bottom:14px;
    width:120px;
  }

  .recognition-art-3{
    right:-64px;
    bottom:8px;
    width:108px;
  }
  .recognition-art-4{
    right:-70px;
    bottom:-4px;
    width:132px;
  }

  .recognition-art-5{
    left:-78px;
    right:auto;
    bottom:8px;
    width:116px;
  }
  .recognition-art-6{
    left:-72px;
    right:auto;
    bottom:10px;
    width:120px;
  }
}

/* Tablet: keep the same idea, but simplify to 2 equal columns */
@media (max-width:980px) and (min-width:701px){
  .recognition-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:56px var(--gap);
  }
  .recognition-item,
  .recognition-item-1,
  .recognition-item-2,
  .recognition-item-3,
  .recognition-item-4,
  .recognition-item-5,
  .recognition-item-6{
    grid-column:auto !important;
    grid-row:auto !important;
    transform:none !important;
  }
}


/* ===== refinement v13: full-width copy + freer supporting images ===== */

@media (min-width:981px){
  /* keep the 3-slot rhythm but let text use the whole card width */
  .recognition-item{
    min-height:280px;
    padding:18px 0 10px;
    overflow:visible;
  }

  .recognition-copy{
    max-width:none !important;
    width:100%;
    position:relative;
    z-index:3;
  }

  .recognition-item h3{
    max-width:none !important;
    width:100%;
    font-size:clamp(28px,2.15vw,38px);
    line-height:1.12 !important;
    margin-bottom:18px;
  }

  .recognition-item p{
    max-width:none !important;
    width:100%;
    font-size:14px;
    line-height:1.6;
    padding-right:0;
  }

  /* images become free-floating accents in the empty grid space */
  .recognition-art{
    position:absolute;
    z-index:1;
    pointer-events:none;
    opacity:.92;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.20));
  }

  /* row 1 */
  .recognition-art-1{
    right:-150px;
    bottom:6px;
    width:118px;
    transform:rotate(-4deg);
  }
  .recognition-art-2{
    left:-150px;
    bottom:20px;
    width:108px;
    transform:rotate(3deg);
  }

  /* row 2 */
  .recognition-art-3{
    right:-140px;
    bottom:12px;
    width:100px;
    transform:rotate(2deg);
  }
  .recognition-art-4{
    right:-150px;
    bottom:0;
    width:118px;
    transform:rotate(-5deg);
  }

  /* row 3 */
  .recognition-art-5{
    left:-148px;
    bottom:16px;
    width:106px;
    transform:rotate(-6deg);
  }
  .recognition-art-6{
    left:-142px;
    bottom:10px;
    width:110px;
    transform:rotate(4deg);
  }
}

/* tablet: full-width copy in each column, images stay supporting */
@media (max-width:980px) and (min-width:701px){
  .recognition-copy{
    max-width:none !important;
    width:100%;
    padding-right:0;
  }
  .recognition-item h3,
  .recognition-item p{
    max-width:none !important;
    width:100%;
  }
  .recognition-art{
    opacity:.88;
    width:92px !important;
    right:6px !important;
    left:auto !important;
    bottom:6px !important;
  }
}

/* mobile: do not reserve text width for images */
@media (max-width:700px){
  .recognition-copy{
    max-width:none !important;
    width:100%;
    padding-right:0 !important;
  }
  .recognition-item h3{
    max-width:none !important;
    width:100%;
  }
  .recognition-item p{
    max-width:none !important;
    width:100%;
  }

  .recognition-item{
    padding-bottom:76px;
  }

  .recognition-art{
    width:76px !important;
    right:0 !important;
    left:auto !important;
    bottom:8px !important;
    opacity:.85;
    transform:none !important;
  }
}


/* ===== refinement v15: точечные исправления без изменения удачной композиции v13 ===== */

/* / УЗНАЁТЕ СЕБЯ? /
   Пояснение шире и стоит по низу большого заголовка. */
.recognition .section-heading{
  align-items:end !important;
}
.recognition .section-heading h2{
  align-self:end;
  margin-bottom:0;
}
.recognition .section-heading p{
  grid-column:7 / span 6 !important;
  align-self:end;
  width:100%;
  max-width:48ch !important;
  margin:0 0 8px 0 !important;
  font-size:15px;
  line-height:1.6;
}

/* Картинки больше не могут наезжать на текст.
   Для них оставлена отдельная свободная зона снизу карточки. */
@media (min-width:981px){
  .recognition-grid{
    row-gap:88px;
  }

  .recognition-item{
    min-height:350px !important;
    padding-bottom:112px !important;
    overflow:visible;
  }

  .recognition-copy{
    position:relative;
    z-index:3;
    width:100%;
    max-width:none !important;
  }

  .recognition-item h3,
  .recognition-item p{
    width:100%;
    max-width:none !important;
  }

  .recognition-art{
    position:absolute;
    z-index:1;
    width:auto;
    max-width:none;
    bottom:10px !important;
    opacity:.94;
    pointer-events:none;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
  }

  /* Небольшие асимметричные акценты — ниже текста, а не поверх него */
  .recognition-art-1{
    width:106px !important;
    right:12px !important;
    left:auto !important;
    transform:rotate(-5deg);
  }
  .recognition-art-2{
    width:96px !important;
    left:18px !important;
    right:auto !important;
    transform:rotate(4deg);
  }
  .recognition-art-3{
    width:92px !important;
    right:22px !important;
    left:auto !important;
    transform:rotate(3deg);
  }
  .recognition-art-4{
    width:104px !important;
    right:8px !important;
    left:auto !important;
    transform:rotate(-4deg);
  }
  .recognition-art-5{
    width:96px !important;
    left:16px !important;
    right:auto !important;
    transform:rotate(-6deg);
  }
  .recognition-art-6{
    width:100px !important;
    left:12px !important;
    right:auto !important;
    transform:rotate(4deg);
  }
}

/* Планшет — изображения тоже ниже текста */
@media (max-width:980px) and (min-width:701px){
  .recognition .section-heading p{
    grid-column:7 / span 6 !important;
    max-width:46ch !important;
  }
  .recognition-item{
    min-height:320px !important;
    padding-bottom:96px !important;
  }
  .recognition-art{
    width:78px !important;
    right:8px !important;
    left:auto !important;
    bottom:8px !important;
  }
}

/* Мобильный: никакого сдвига вправо и никакого перекрытия */
@media (max-width:700px){
  .recognition .section-heading{
    align-items:start !important;
  }
  .recognition .section-heading p{
    width:100%;
    max-width:100% !important;
    margin:18px 0 0 !important;
  }
  .recognition-item{
    padding-bottom:78px !important;
  }
  .recognition-art{
    width:70px !important;
    right:0 !important;
    left:auto !important;
    bottom:6px !important;
    transform:none !important;
  }
}

/* / ПРОЕКТЫ /
   Заголовок не меняем. Поясняющий текст переносим в отдельный ряд,
   поэтому он физически не может пересекаться с заголовком. */
.works-intro{
  align-items:start !important;
  grid-auto-rows:auto;
  margin-bottom:82px;
}
.works-intro .projects-heading{
  grid-column:1 / -1 !important;
  grid-row:1;
  margin:0;
}
.works-intro > p{
  grid-column:9 / span 4 !important;
  grid-row:2;
  width:100%;
  max-width:52ch !important;
  margin:42px 0 0 !important;
  font-size:15px;
  line-height:1.62;
}

/* Сами кейсы возвращены к более удачным пропорциям версии 13.
   Изображения не растягиваем и не ломаем кадр. */
.case,
.case-b{
  align-items:center;
}
.case-shot,
.case-b .case-shot,
.case-c .case-shot{
  aspect-ratio:4 / 3 !important;
  height:auto !important;
  overflow:hidden;
}
.case-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.case-a .visual-placeholder img{object-position:center 48%;}
.case-b .visual-placeholder img{object-position:center 50%;}
.case-c .visual-placeholder img{object-position:center 42%;}

@media (max-width:700px){
  .works-intro{
    display:block !important;
  }
  .works-intro > p{
    width:100%;
    max-width:100% !important;
    margin-top:30px !important;
  }
}


/* =========================================================
   MOTION SYSTEM v17
   Based on the reference logic, tuned down for a business site.
   ========================================================= */

html{scroll-behavior:auto}

/* fixed animated grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background-image:url("./images/noise.gif");
  background-repeat:repeat;
  background-size:70px 70px;
  opacity:.075;
}

/* shared reveal */
html.motion-ready [data-reveal]{
  opacity:0;
  translate:0 34px;
  transition:
    opacity .68s cubic-bezier(.22,.68,.18,1),
    translate .72s cubic-bezier(.22,.68,.18,1);
  will-change:opacity,translate;
}
html.motion-ready [data-reveal="soft"]{translate:0 22px}
html.motion-ready [data-reveal="media"]{
  translate:0 42px;
  transition-duration:.95s;
}
html.motion-ready [data-reveal].is-visible{
  opacity:1;
  translate:0 0;
}

/* hero entrance */
html.motion-ready .topbar{
  opacity:0;
  translate:0 -16px;
  transition:opacity .55s ease,translate .65s cubic-bezier(.22,.68,.18,1);
}
html.motion-ready.page-entered .topbar{opacity:1;translate:0 0}

html.motion-ready .hero h1,
html.motion-ready .hero-lead,
html.motion-ready .hero-note,
html.motion-ready .hero-actions,
html.motion-ready .hero-photo{
  opacity:0;
  translate:0 38px;
  transition:
    opacity .72s cubic-bezier(.22,.68,.18,1),
    translate .78s cubic-bezier(.22,.68,.18,1);
}
html.motion-ready .hero-photo{
  translate:0 50px;
  scale:.985;
  transition:
    opacity 1.05s cubic-bezier(.22,.68,.18,1),
    translate 1.05s cubic-bezier(.22,.68,.18,1),
    scale 1.05s cubic-bezier(.22,.68,.18,1);
}
html.motion-ready.page-entered .hero h1{opacity:1;translate:0 0;transition-delay:.08s}
html.motion-ready.page-entered .hero-lead{opacity:1;translate:0 0;transition-delay:.18s}
html.motion-ready.page-entered .hero-note{opacity:1;translate:0 0;transition-delay:.25s}
html.motion-ready.page-entered .hero-actions{opacity:1;translate:0 0;transition-delay:.32s}
html.motion-ready.page-entered .hero-photo{
  opacity:1;
  translate:0 var(--hero-parallax,0px);
  scale:1;
  transition-delay:.22s;
}

/* recognition staged sequence */
.recognition-item{position:relative}
.recognition-item::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:1px;
  background:var(--line-dark);
  scale:0 1;
  transform-origin:left center;
  transition:scale .72s cubic-bezier(.22,.68,.18,1);
  z-index:4;
}
html.motion-ready .recognition-item{border-top-color:transparent !important}
html.motion-ready .recognition-item .num,
html.motion-ready .recognition-item h3,
html.motion-ready .recognition-item p,
html.motion-ready .recognition-item .recognition-art{
  opacity:0;
  translate:0 22px;
  transition:
    opacity .56s ease,
    translate .65s cubic-bezier(.22,.68,.18,1),
    scale .65s cubic-bezier(.22,.68,.18,1);
}
html.motion-ready .recognition-item .recognition-art{
  translate:0 16px;
  scale:.95;
}
.recognition-item.is-visible::before{scale:1 1}
.recognition-item.is-visible .num{
  opacity:1 !important;translate:0 0 !important;transition-delay:.08s !important
}
.recognition-item.is-visible h3{
  opacity:1 !important;translate:0 0 !important;transition-delay:.15s !important
}
.recognition-item.is-visible p{
  opacity:1 !important;translate:0 0 !important;transition-delay:.23s !important
}
.recognition-item.is-visible .recognition-art{
  opacity:.94 !important;translate:0 0 !important;scale:1 !important;transition-delay:.32s !important
}

/* project/media parallax */
.case-shot img,
.visual-pair-item img{
  scale:1.045;
  translate:0 var(--media-parallax,0px);
  will-change:translate;
  transition:scale .55s cubic-bezier(.22,.68,.18,1);
}
.case:hover .case-shot img{scale:1.065}
.about-photo-real img{
  translate:0 var(--about-parallax,0px);
  will-change:translate;
}

/* process line first */
.process-steps article{
  position:relative;
  border-top-color:transparent !important;
}
.process-steps article::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:1px;
  background:var(--line-dark);
  scale:0 1;
  transform-origin:left center;
  transition:scale .72s cubic-bezier(.22,.68,.18,1);
}
.process-steps article.is-visible::before{scale:1 1}

/* buttons */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .28s ease,border-color .28s ease,translate .28s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  background:rgba(255,255,255,.13);
  translate:-105% 0;
  transition:translate .42s cubic-bezier(.22,.68,.18,1);
}
.btn:hover::before{translate:0 0}
.btn:hover{translate:0 -1px}
.text-link{transition:opacity .25s ease,translate .25s ease}
.text-link:hover{opacity:.72;translate:3px 0}
.btn-header b{transition:translate .28s cubic-bezier(.22,.68,.18,1)}
.btn-header:hover b{translate:3px 3px}

/* stagger */
.process-steps article:nth-child(2),
.terms-list article:nth-child(2){transition-delay:.07s}
.process-steps article:nth-child(3),
.terms-list article:nth-child(3){transition-delay:.14s}
.process-steps article:nth-child(4),
.terms-list article:nth-child(4){transition-delay:.21s}

/* nav underline */
.nav a{position:relative}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:1px;
  background:currentColor;
  scale:0 1;
  transform-origin:right center;
  transition:scale .32s ease;
}
.nav a:hover::after{scale:1 1;transform-origin:left center}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html.motion-ready [data-reveal],
  html.motion-ready .topbar,
  html.motion-ready .hero h1,
  html.motion-ready .hero-lead,
  html.motion-ready .hero-note,
  html.motion-ready .hero-actions,
  html.motion-ready .hero-photo,
  html.motion-ready .recognition-item .num,
  html.motion-ready .recognition-item h3,
  html.motion-ready .recognition-item p,
  html.motion-ready .recognition-item .recognition-art{
    opacity:1 !important;
    translate:0 0 !important;
    scale:1 !important;
  }
}

/* no heavy parallax on touch-size layouts */
@media (max-width:1000px){
  .hero-photo,
  .case-shot img,
  .visual-pair-item img,
  .about-photo-real img{
    translate:0 0 !important;
  }
}


/* =========================================================
   refinement v18: quieter grain, rebuilt warm-client CTA,
   guaranteed footer-bottom visibility
   ========================================================= */

/* 1. Softer, slower film grain */
body::before{
  background-size:70px 70px !important;
  opacity:.035 !important;
}

/* 2. / НЕ ТЕРЯЙТЕ ТЁПЛОГО КЛИЕНТА / */
.mid-cta-redesign{
  padding-top:28px;
  padding-bottom:66px;
  overflow:hidden;
}

.mid-cta-redesign > .eyebrow{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  margin-bottom:42px;
}

.mid-cta-stage{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  align-items:center;
  min-height:470px;
}

.mid-cta-headline{
  grid-column:1 / span 5;
  align-self:center;
  position:relative;
  z-index:3;
}

.mid-cta-headline h2{
  margin:0;
  width:100%;
  max-width:none !important;
  font-size:clamp(52px,5.1vw,82px);
  line-height:.98 !important;
  letter-spacing:-.035em;
  color:#fff;
}

.mid-cta-visual{
  grid-column:5 / span 5;
  align-self:center;
  position:relative;
  z-index:2;
  margin-left:-34px;
  margin-right:-18px;
}

.mid-cta-visual img{
  display:block;
  width:118%;
  max-width:none;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(64,15,15,.22));
  transform:rotate(-1.1deg);
}

.mid-cta-copy{
  grid-column:10 / span 3;
  align-self:center;
  padding:0 0 0 10px;
  position:relative;
  z-index:4;
}

.mid-cta-copy p{
  margin:0;
  max-width:31ch;
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.88);
}

.mid-cta-copy .mid-cta-strong{
  margin-top:18px;
}

.mid-cta-copy strong{
  color:#fff;
}

.mid-cta-divider{
  display:block;
  width:32px;
  height:1px;
  background:rgba(255,255,255,.72);
  margin:20px 0 0;
}

.mid-cta-button{
  margin-top:28px !important;
  min-height:56px;
  width:100%;
  display:grid !important;
  grid-template-columns:1fr 58px;
  align-items:center;
  padding:0 0 0 20px !important;
  color:var(--ink) !important;
  background:#fff !important;
  border-color:#fff !important;
}

.mid-cta-button span{
  text-align:left;
}

.mid-cta-button b{
  height:100%;
  display:grid;
  place-items:center;
  border-left:1px solid rgba(30,30,30,.22);
  font-size:18px;
  font-weight:400;
  transition:translate .28s cubic-bezier(.22,.68,.18,1);
}

.mid-cta-button:hover b{
  translate:3px -3px;
}

/* tablet */
@media (max-width:1100px) and (min-width:701px){
  .mid-cta-stage{
    grid-template-columns:repeat(12,minmax(0,1fr));
    row-gap:34px;
    min-height:0;
  }

  .mid-cta-headline{
    grid-column:1 / span 6;
  }

  .mid-cta-headline h2{
    font-size:clamp(48px,6.2vw,70px);
  }

  .mid-cta-visual{
    grid-column:6 / span 7;
    margin-left:-48px;
    margin-right:-24px;
  }

  .mid-cta-copy{
    grid-column:7 / span 6;
    padding-left:0;
  }

  .mid-cta-copy p{
    max-width:42ch;
  }

  .mid-cta-button{
    max-width:330px;
  }
}

/* mobile */
@media (max-width:700px){
  .mid-cta-redesign{
    padding-top:24px;
    padding-bottom:54px;
  }

  .mid-cta-redesign > .eyebrow{
    margin-bottom:28px;
  }

  .mid-cta-stage{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:28px;
    min-height:0;
  }

  .mid-cta-headline,
  .mid-cta-visual,
  .mid-cta-copy{
    width:100%;
    margin:0;
    padding:0;
  }

  .mid-cta-headline h2{
    font-size:clamp(42px,12vw,58px);
    line-height:1.01 !important;
  }

  .mid-cta-visual{
    order:2;
  }

  .mid-cta-visual img{
    width:112%;
    margin-left:-6%;
    transform:none;
  }

  .mid-cta-copy{
    order:3;
  }

  .mid-cta-copy p{
    max-width:100%;
    font-size:14px;
  }

  .mid-cta-button{
    width:100%;
  }
}

/* 3. Footer bottom is always visible */
.footer{
  padding-bottom:26px !important;
}

.footer-bottom{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  translate:0 0 !important;
  transform:none !important;
  min-height:28px;
  padding-top:14px;
}

html.motion-ready .footer-bottom{
  opacity:1 !important;
  translate:0 0 !important;
}

@media (max-width:700px){
  .footer-bottom{
    gap:10px 18px;
    line-height:1.45;
  }
}


/* =========================================================
   refinement v19: rebuilt composition for warm-client CTA
   ========================================================= */

.mid-cta-redesign{
  padding-top:30px !important;
  padding-bottom:54px !important;
  min-height:auto !important;
}

.mid-cta-redesign > .eyebrow{
  margin-bottom:34px !important;
}

.mid-cta-stage{
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  column-gap:var(--gap) !important;
  align-items:center !important;
  row-gap:0 !important;
}

/* Left: headline compact enough to stay as one clear visual block */
.mid-cta-headline{
  grid-column:1 / span 5 !important;
  align-self:center !important;
  padding-right:8px;
}

.mid-cta-headline h2{
  font-size:clamp(50px,4.55vw,72px) !important;
  line-height:.97 !important;
  letter-spacing:-.03em !important;
  max-width:8.8ch !important;
  text-wrap:balance;
}

/* Centre: the illustration is large, but never collides with the copy */
.mid-cta-visual{
  grid-column:5 / span 5 !important;
  align-self:center !important;
  margin:0 -12px 0 -6px !important;
  z-index:2 !important;
  pointer-events:none;
}

.mid-cta-visual img{
  width:108% !important;
  max-width:none !important;
  margin:0 !important;
  transform:rotate(-.5deg) !important;
  filter:drop-shadow(0 18px 26px rgba(55,12,12,.18)) !important;
}

/* Right: fixed readable column, never under the image */
.mid-cta-copy{
  grid-column:10 / span 3 !important;
  align-self:center !important;
  padding-left:18px !important;
  z-index:4 !important;
  position:relative !important;
}

.mid-cta-copy-inner{
  width:100%;
  max-width:290px;
  margin-left:auto;
}

.mid-cta-copy p{
  max-width:none !important;
  width:100% !important;
  font-size:14px !important;
  line-height:1.48 !important;
}

.mid-cta-divider{
  margin-top:18px !important;
}

.mid-cta-copy .mid-cta-strong{
  margin-top:16px !important;
}

.mid-cta-button{
  margin-top:22px !important;
  min-height:52px !important;
  width:100% !important;
  grid-template-columns:1fr 52px !important;
  padding-left:18px !important;
  font-size:12px !important;
  letter-spacing:.02em;
}

.mid-cta-button b{
  font-size:16px !important;
}

/* Desktop medium: preserve 3-part composition but reduce pressure */
@media (max-width:1250px) and (min-width:981px){
  .mid-cta-headline h2{
    font-size:clamp(46px,4.7vw,62px) !important;
    max-width:9.3ch !important;
  }

  .mid-cta-visual{
    grid-column:5 / span 5 !important;
    margin-left:-18px !important;
    margin-right:-18px !important;
  }

  .mid-cta-visual img{
    width:112% !important;
  }

  .mid-cta-copy{
    grid-column:10 / span 3 !important;
    padding-left:8px !important;
  }

  .mid-cta-copy-inner{
    max-width:260px;
  }

  .mid-cta-copy p{
    font-size:13px !important;
  }
}

/* Tablet: headline first, then image + copy below in two columns */
@media (max-width:980px) and (min-width:701px){
  .mid-cta-stage{
    row-gap:30px !important;
  }

  .mid-cta-headline{
    grid-column:1 / span 7 !important;
    grid-row:1 !important;
  }

  .mid-cta-headline h2{
    font-size:clamp(46px,6vw,64px) !important;
    max-width:10ch !important;
  }

  .mid-cta-visual{
    grid-column:1 / span 7 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .mid-cta-visual img{
    width:104% !important;
  }

  .mid-cta-copy{
    grid-column:8 / span 5 !important;
    grid-row:2 !important;
    padding-left:18px !important;
  }

  .mid-cta-copy-inner{
    max-width:none;
  }
}

/* Mobile: strict vertical flow, no overlap */
@media (max-width:700px){
  .mid-cta-redesign{
    padding-top:22px !important;
    padding-bottom:44px !important;
  }

  .mid-cta-redesign > .eyebrow{
    margin-bottom:22px !important;
  }

  .mid-cta-stage{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .mid-cta-headline,
  .mid-cta-visual,
  .mid-cta-copy{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-headline h2{
    font-size:clamp(42px,12vw,56px) !important;
    line-height:1 !important;
    max-width:100% !important;
  }

  .mid-cta-visual img{
    width:108% !important;
    margin-left:-4% !important;
    transform:none !important;
  }

  .mid-cta-copy-inner{
    max-width:none !important;
  }

  .mid-cta-copy p{
    font-size:14px !important;
    line-height:1.52 !important;
  }
}


/* =========================================================
   refinement v20: CTA composition tightened after screenshot review
   ========================================================= */

@media (min-width:981px){
  .mid-cta-redesign{
    padding-top:26px !important;
    padding-bottom:46px !important;
  }

  .mid-cta-redesign > .eyebrow{
    margin-bottom:30px !important;
  }

  .mid-cta-stage{
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    min-height:390px !important;
    align-items:center !important;
  }

  /* Wider headline so it forms a compact 3-line block instead of a tall column */
  .mid-cta-headline{
    grid-column:1 / span 5 !important;
    align-self:center !important;
    padding-right:20px !important;
  }

  .mid-cta-headline h2{
    width:100% !important;
    max-width:10.8ch !important;
    font-size:clamp(52px,4.25vw,68px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
    text-wrap:balance;
  }

  /* Bring the visual much higher and make it the central anchor */
  .mid-cta-visual{
    grid-column:5 / span 5 !important;
    align-self:center !important;
    margin:-6px -20px 0 -24px !important;
  }

  .mid-cta-visual img{
    width:112% !important;
    transform:rotate(-.35deg) !important;
  }

  /* Right copy aligned with the visual centre, not dropped to the bottom */
  .mid-cta-copy{
    grid-column:10 / span 3 !important;
    align-self:center !important;
    padding-left:12px !important;
    margin-top:0 !important;
  }

  .mid-cta-copy-inner{
    max-width:300px !important;
    margin:0 0 0 auto !important;
  }

  .mid-cta-copy p{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .mid-cta-button{
    margin-top:20px !important;
    min-height:52px !important;
  }
}

/* Large desktop: let headline breathe even more */
@media (min-width:1320px){
  .mid-cta-headline{
    grid-column:1 / span 5 !important;
  }

  .mid-cta-headline h2{
    max-width:11.4ch !important;
    font-size:72px !important;
  }

  .mid-cta-visual{
    grid-column:5 / span 5 !important;
    margin-left:-34px !important;
    margin-right:-26px !important;
  }

  .mid-cta-copy{
    grid-column:10 / span 3 !important;
  }
}


/* =========================================================
   refinement v21: simple 3-column CTA, no overlap
   ========================================================= */

@media (min-width:981px){

  .mid-cta-redesign{
    padding-top:28px !important;
    padding-bottom:54px !important;
    overflow:hidden !important;
  }

  .mid-cta-redesign > .eyebrow{
    max-width:var(--max) !important;
    margin:0 auto 36px !important;
  }

  /* THREE REAL COLUMNS:
     1) headline
     2) image
     3) text + button
  */
  .mid-cta-stage{
    max-width:var(--max) !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(250px,3fr) !important;
    column-gap:34px !important;
    align-items:center !important;
    min-height:430px !important;
  }

  .mid-cta-headline{
    grid-column:1 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
  }

  .mid-cta-headline h2{
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
    font-size:clamp(52px,4.25vw,70px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
    text-wrap:balance;
  }

  .mid-cta-visual{
    grid-column:2 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    position:relative !important;
    z-index:1 !important;
  }

  .mid-cta-visual img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
    object-fit:contain !important;
    filter:drop-shadow(0 18px 28px rgba(55,12,12,.18)) !important;
  }

  .mid-cta-copy{
    grid-column:3 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    position:relative !important;
    z-index:2 !important;
  }

  .mid-cta-copy-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .mid-cta-divider{
    margin:20px 0 0 !important;
  }

  .mid-cta-copy .mid-cta-strong{
    margin-top:18px !important;
  }

  .mid-cta-button{
    width:100% !important;
    min-height:54px !important;
    margin-top:26px !important;
    padding-left:18px !important;
    grid-template-columns:1fr 54px !important;
  }
}

/* Slightly tighter on smaller desktop, still strictly 3 columns */
@media (max-width:1200px) and (min-width:981px){
  .mid-cta-stage{
    grid-template-columns:minmax(0,3.8fr) minmax(0,5fr) minmax(240px,3.2fr) !important;
    column-gap:24px !important;
  }

  .mid-cta-headline h2{
    font-size:clamp(48px,4.45vw,62px) !important;
  }

  .mid-cta-copy p{
    font-size:14px !important;
  }
}

/* Tablet */
@media (max-width:980px) and (min-width:701px){
  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:32px !important;
  }

  .mid-cta-headline{
    grid-column:1 / -1 !important;
  }

  .mid-cta-visual{
    grid-column:1 !important;
    margin:0 !important;
  }

  .mid-cta-copy{
    grid-column:2 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-visual img{
    width:100% !important;
    margin:0 !important;
    transform:none !important;
  }
}

/* Mobile */
@media (max-width:700px){
  .mid-cta-stage{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .mid-cta-headline,
  .mid-cta-visual,
  .mid-cta-copy{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-visual img{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    transform:none !important;
  }
}


/* =========================================================
   refinement v22: 2-column CTA + image centred between them
   ========================================================= */

@media (min-width:981px){

  .mid-cta-redesign{
    padding-top:28px !important;
    padding-bottom:56px !important;
    overflow:hidden !important;
  }

  .mid-cta-redesign > .eyebrow{
    max-width:var(--max) !important;
    margin:0 auto 32px !important;
  }

  .mid-cta-stage{
    max-width:var(--max) !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:110px !important;
    align-items:center !important;
    position:relative !important;
    min-height:430px !important;
  }

  /* LEFT COLUMN — only headline */
  .mid-cta-headline{
    grid-column:1 !important;
    position:relative !important;
    z-index:3 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
  }

  .mid-cta-headline h2{
    margin:0 !important;
    width:100% !important;
    max-width:9.8ch !important;
    font-size:clamp(56px,4.8vw,76px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
    text-wrap:balance;
  }

  /* RIGHT COLUMN — text + CTA */
  .mid-cta-copy{
    grid-column:2 !important;
    position:relative !important;
    z-index:4 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    justify-self:end !important;
  }

  .mid-cta-copy-inner{
    width:min(100%,360px) !important;
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:0 !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.55 !important;
  }

  .mid-cta-divider{
    margin:20px 0 0 !important;
  }

  .mid-cta-copy .mid-cta-strong{
    margin-top:18px !important;
  }

  .mid-cta-button{
    width:100% !important;
    min-height:56px !important;
    margin-top:26px !important;
    grid-template-columns:1fr 56px !important;
  }

  /* IMAGE — visually centred between both columns,
     lower than the text baseline so it connects them without covering copy */
  .mid-cta-visual{
    position:absolute !important;
    left:50% !important;
    top:56% !important;
    translate:-50% -50% !important;
    width:min(39vw,560px) !important;
    max-width:560px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  .mid-cta-visual img{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    transform:rotate(-.4deg) !important;
    object-fit:contain !important;
    filter:drop-shadow(0 18px 28px rgba(55,12,12,.18)) !important;
  }
}

/* Medium desktop: keep 2 columns, reduce the centre image a little */
@media (max-width:1280px) and (min-width:981px){
  .mid-cta-stage{
    column-gap:82px !important;
  }

  .mid-cta-headline h2{
    font-size:clamp(50px,4.55vw,64px) !important;
    max-width:9.8ch !important;
  }

  .mid-cta-copy-inner{
    max-width:330px !important;
  }

  .mid-cta-visual{
    width:min(36vw,470px) !important;
    top:58% !important;
  }
}

/* Tablet: headline + copy as two columns, image sits centred below */
@media (max-width:980px) and (min-width:701px){
  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:34px 46px !important;
    position:relative !important;
  }

  .mid-cta-headline{
    grid-column:1 !important;
  }

  .mid-cta-copy{
    grid-column:2 !important;
  }

  .mid-cta-visual{
    position:relative !important;
    grid-column:1 / -1 !important;
    width:min(72%,560px) !important;
    margin:8px auto 0 !important;
    left:auto !important;
    top:auto !important;
    translate:none !important;
  }

  .mid-cta-visual img{
    width:100% !important;
    margin:0 !important;
    transform:none !important;
  }
}

/* Mobile: straightforward vertical hierarchy */
@media (max-width:700px){
  .mid-cta-stage{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .mid-cta-headline,
  .mid-cta-copy,
  .mid-cta-visual{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    translate:none !important;
  }

  .mid-cta-headline h2{
    max-width:100% !important;
  }

  .mid-cta-visual{
    order:2 !important;
  }

  .mid-cta-copy{
    order:3 !important;
  }

  .mid-cta-copy-inner{
    max-width:none !important;
  }

  .mid-cta-visual img{
    width:100% !important;
    transform:none !important;
  }
}


/* =========================================================
   refinement v23: stable CTA layout
   Two content columns + a dedicated visual track between them.
   No absolute positioning, no overlap.
   ========================================================= */

@media (min-width:981px){

  .mid-cta-redesign{
    padding-top:30px !important;
    padding-bottom:58px !important;
    overflow:visible !important;
  }

  .mid-cta-redesign > .eyebrow{
    max-width:var(--max) !important;
    margin:0 auto 40px !important;
  }

  .mid-cta-stage{
    max-width:var(--max) !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,4.6fr) minmax(360px,4.6fr) minmax(250px,2.8fr) !important;
    column-gap:32px !important;
    align-items:center !important;
    min-height:400px !important;
    position:relative !important;
  }

  /* LEFT */
  .mid-cta-headline{
    grid-column:1 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    position:relative !important;
    z-index:3 !important;
  }

  .mid-cta-title-fixed{
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
    font-size:clamp(50px,4.35vw,72px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
  }

  .mid-cta-title-fixed > span{
    display:block !important;
    white-space:nowrap !important;
  }

  /* CENTRE VISUAL — regular grid item, never over text */
  .mid-cta-visual{
    grid-column:2 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    translate:none !important;
    align-self:center !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  .mid-cta-visual img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
    object-fit:contain !important;
    filter:drop-shadow(0 18px 28px rgba(55,12,12,.18)) !important;
  }

  /* RIGHT */
  .mid-cta-copy{
    grid-column:3 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    align-self:center !important;
    z-index:3 !important;
  }

  .mid-cta-copy-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.52 !important;
  }

  .mid-cta-divider{
    margin:20px 0 0 !important;
  }

  .mid-cta-copy .mid-cta-strong{
    margin-top:18px !important;
  }

  .mid-cta-button{
    width:100% !important;
    min-height:54px !important;
    margin-top:26px !important;
    grid-template-columns:1fr 54px !important;
  }
}

/* medium desktop */
@media (max-width:1240px) and (min-width:981px){
  .mid-cta-stage{
    grid-template-columns:minmax(0,4.4fr) minmax(330px,4.4fr) minmax(240px,3.2fr) !important;
    column-gap:24px !important;
  }

  .mid-cta-title-fixed{
    font-size:clamp(46px,4.1vw,60px) !important;
  }

  .mid-cta-copy p{
    font-size:14px !important;
  }
}

/* tablet */
@media (max-width:980px) and (min-width:701px){
  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:30px 38px !important;
  }

  .mid-cta-headline{
    grid-column:1 / -1 !important;
  }

  .mid-cta-title-fixed > span{
    white-space:normal !important;
  }

  .mid-cta-visual{
    grid-column:1 !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    translate:none !important;
  }

  .mid-cta-copy{
    grid-column:2 !important;
  }

  .mid-cta-visual img{
    width:100% !important;
    transform:none !important;
  }
}

/* mobile */
@media (max-width:700px){
  .mid-cta-stage{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .mid-cta-headline,
  .mid-cta-visual,
  .mid-cta-copy{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    translate:none !important;
  }

  .mid-cta-title-fixed{
    font-size:clamp(42px,11.5vw,56px) !important;
    line-height:1.02 !important;
  }

  .mid-cta-title-fixed > span{
    white-space:normal !important;
  }

  .mid-cta-visual{
    order:2 !important;
  }

  .mid-cta-copy{
    order:3 !important;
  }

  .mid-cta-visual img{
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
  }
}


/* =========================================================
   refinement v24: image under headline
   Left column = headline + image
   Right column = copy + CTA
   ========================================================= */

@media (min-width:981px){

  .mid-cta-redesign{
    padding-top:30px !important;
    padding-bottom:54px !important;
  }

  .mid-cta-redesign > .eyebrow{
    margin-bottom:34px !important;
  }

  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:minmax(0,7fr) minmax(300px,5fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:72px !important;
    row-gap:26px !important;
    align-items:start !important;
    min-height:0 !important;
  }

  /* headline top-left */
  .mid-cta-headline{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-title-fixed{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    font-size:clamp(54px,4.65vw,76px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
  }

  .mid-cta-title-fixed > span{
    display:block !important;
    white-space:nowrap !important;
  }

  /* image directly under the headline */
  .mid-cta-visual{
    grid-column:1 !important;
    grid-row:2 !important;
    width:min(78%,680px) !important;
    max-width:680px !important;
    margin:0 0 0 auto !important;
    padding:0 !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    translate:none !important;
    align-self:start !important;
    justify-self:end !important;
  }

  .mid-cta-visual img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
    object-fit:contain !important;
    filter:drop-shadow(0 18px 28px rgba(55,12,12,.18)) !important;
  }

  /* right column spans the two rows */
  .mid-cta-copy{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-copy-inner{
    width:min(100%,420px) !important;
    max-width:420px !important;
    margin:0 0 0 auto !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:none !important;
    font-size:15px !important;
    line-height:1.55 !important;
  }

  .mid-cta-button{
    width:100% !important;
    max-width:330px !important;
    min-height:54px !important;
    margin-top:26px !important;
  }
}

/* medium desktop */
@media (max-width:1240px) and (min-width:981px){
  .mid-cta-stage{
    grid-template-columns:minmax(0,6.7fr) minmax(280px,5.3fr) !important;
    column-gap:48px !important;
  }

  .mid-cta-title-fixed{
    font-size:clamp(48px,4.2vw,62px) !important;
  }

  .mid-cta-visual{
    width:min(84%,590px) !important;
  }

  .mid-cta-copy-inner{
    max-width:360px !important;
  }
}

/* tablet */
@media (max-width:980px) and (min-width:701px){
  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto !important;
    gap:28px 38px !important;
  }

  .mid-cta-headline{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .mid-cta-visual{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    margin:0 !important;
  }

  .mid-cta-copy{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
  }

  .mid-cta-title-fixed > span{
    white-space:normal !important;
  }
}

/* mobile */
@media (max-width:700px){
  .mid-cta-stage{
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
  }

  .mid-cta-headline{
    order:1 !important;
  }

  .mid-cta-visual{
    order:2 !important;
    width:100% !important;
    margin:0 !important;
  }

  .mid-cta-copy{
    order:3 !important;
  }

  .mid-cta-title-fixed > span{
    white-space:normal !important;
  }
}


/* =========================================================
   refinement v25: 2-line full-width headline + aligned lower row
   ========================================================= */

@media (min-width:981px){

  .mid-cta-redesign{
    padding-top:30px !important;
    padding-bottom:58px !important;
  }

  .mid-cta-redesign > .eyebrow{
    margin-bottom:34px !important;
  }

  /* Two-row composition:
     row 1 = headline across full width
     row 2 = image left / copy + button right
  */
  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:minmax(0,7fr) minmax(320px,5fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:72px !important;
    row-gap:38px !important;
    align-items:start !important;
    min-height:0 !important;
  }

  .mid-cta-headline{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-title-fixed{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    font-size:clamp(56px,5.3vw,86px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
  }

  .mid-cta-title-fixed > span{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    white-space:nowrap !important;
  }

  /* image and copy start on same top line */
  .mid-cta-visual{
    grid-column:1 !important;
    grid-row:2 !important;
    width:min(76%,700px) !important;
    max-width:700px !important;
    margin:0 !important;
    padding:0 !important;
    justify-self:center !important;
    align-self:start !important;
  }

  .mid-cta-visual img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
  }

  .mid-cta-copy{
    grid-column:2 !important;
    grid-row:2 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    align-self:start !important;
  }

  .mid-cta-copy-inner{
    width:100% !important;
    max-width:430px !important;
    margin:0 !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.55 !important;
  }

  .mid-cta-divider{
    margin:20px 0 0 !important;
  }

  .mid-cta-copy .mid-cta-strong{
    margin-top:18px !important;
  }

  /* Fix button: single clean row, arrow cell only once */
  .mid-cta-button{
    width:100% !important;
    max-width:340px !important;
    min-height:56px !important;
    margin-top:26px !important;
    padding:0 0 0 20px !important;
    display:grid !important;
    grid-template-columns:1fr 56px !important;
    align-items:center !important;
    background:#fff !important;
    color:var(--ink) !important;
    border:0 !important;
  }

  .mid-cta-button::before{
    display:none !important;
  }

  .mid-cta-button span{
    display:block !important;
    text-align:left !important;
    white-space:nowrap !important;
  }

  .mid-cta-button b{
    display:grid !important;
    place-items:center !important;
    width:56px !important;
    height:56px !important;
    border-left:1px solid rgba(35,35,35,.18) !important;
    font-size:17px !important;
    line-height:1 !important;
  }
}

@media (max-width:1240px) and (min-width:981px){
  .mid-cta-stage{
    grid-template-columns:minmax(0,6.6fr) minmax(300px,5.4fr) !important;
    column-gap:52px !important;
  }

  .mid-cta-title-fixed{
    font-size:clamp(50px,4.9vw,68px) !important;
  }

  .mid-cta-visual{
    width:min(84%,620px) !important;
  }

  .mid-cta-copy-inner{
    max-width:380px !important;
  }
}

/* tablet */
@media (max-width:980px) and (min-width:701px){
  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto !important;
    gap:30px 38px !important;
  }

  .mid-cta-headline{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  .mid-cta-title-fixed > span{
    white-space:normal !important;
    width:auto !important;
  }

  .mid-cta-visual{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    margin:0 !important;
  }

  .mid-cta-copy{
    grid-column:2 !important;
    grid-row:2 !important;
  }
}

/* mobile */
@media (max-width:700px){
  .mid-cta-stage{
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
  }

  .mid-cta-headline{
    order:1 !important;
  }

  .mid-cta-title-fixed > span{
    white-space:normal !important;
    width:auto !important;
  }

  .mid-cta-visual{
    order:2 !important;
    width:100% !important;
  }

  .mid-cta-copy{
    order:3 !important;
  }

  .mid-cta-button{
    max-width:none !important;
  }
}


/* =========================================================
   refinement v26: normal CTA button + proper image/text alignment
   ========================================================= */

@media (min-width:981px){

  /* lower row: image and copy share the same top baseline */
  .mid-cta-stage{
    align-items:start !important;
  }

  .mid-cta-visual{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:start !important;
    justify-self:start !important;
    width:min(82%,720px) !important;
    margin:0 !important;
  }

  .mid-cta-copy{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    justify-self:start !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-copy-inner{
    width:100% !important;
    max-width:430px !important;
    margin:0 !important;
  }

  .mid-cta-copy p:first-child{
    margin-top:0 !important;
  }

  /* plain button — no pseudo arrow cell, no second bar */
  .mid-cta-button{
    display:inline-flex !important;
    width:auto !important;
    max-width:none !important;
    min-width:220px !important;
    min-height:52px !important;
    padding:0 24px !important;
    margin-top:26px !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    border:0 !important;
    background:#fff !important;
    color:var(--ink) !important;
    font-size:12px !important;
    line-height:1 !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
    text-transform:uppercase !important;
  }

  .mid-cta-button::before,
  .mid-cta-button::after{
    content:none !important;
    display:none !important;
  }

  .mid-cta-button:hover{
    background:#f1f1ee !important;
    color:var(--ink) !important;
    translate:0 -1px !important;
  }
}

@media (max-width:1240px) and (min-width:981px){
  .mid-cta-visual{
    width:min(88%,640px) !important;
  }

  .mid-cta-copy-inner{
    max-width:390px !important;
  }
}

@media (max-width:980px){
  .mid-cta-button{
    display:inline-flex !important;
    width:auto !important;
    min-width:210px !important;
    padding:0 22px !important;
    justify-content:center !important;
  }

  .mid-cta-button::before,
  .mid-cta-button::after{
    content:none !important;
    display:none !important;
  }
}

@media (max-width:700px){
  .mid-cta-button{
    width:100% !important;
    min-width:0 !important;
  }
}


/* =========================================================
   v27 — / НЕ ТЕРЯЙТЕ ТЁПЛОГО КЛИЕНТА /
   Смелая 12-колоночная редакционная сетка
   ========================================================= */

@media (min-width:981px){

  .mid-cta-redesign{
    padding:32px 0 74px !important;
    overflow:hidden !important;
  }

  .mid-cta-redesign > .eyebrow{
    max-width:var(--max) !important;
    margin:0 auto 42px !important;
  }

  .mid-cta-stage{
    max-width:var(--max) !important;
    margin:0 auto !important;

    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    grid-template-rows:auto auto !important;
    column-gap:var(--gap) !important;
    row-gap:56px !important;

    align-items:start !important;
    min-height:0 !important;
  }

  /* Заголовок — почти на всю сетку, строго 2 строки */
  .mid-cta-headline{
    grid-column:1 / 12 !important;
    grid-row:1 !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-title-fixed{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;

    font-size:clamp(60px,5.45vw,88px) !important;
    line-height:.94 !important;
    letter-spacing:-.04em !important;
  }

  .mid-cta-title-fixed > span{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    white-space:nowrap !important;
  }

  /* Визуал занимает 7 колонок, но начинается со 2-й:
     первая колонка работает как редакционный воздух */
  .mid-cta-visual{
    grid-column:2 / 8 !important;
    grid-row:2 !important;

    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;

    position:relative !important;
    align-self:start !important;
    justify-self:stretch !important;
    overflow:visible !important;
  }

  .mid-cta-visual img{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;

    object-fit:contain !important;
    filter:drop-shadow(0 22px 30px rgba(74,18,18,.16)) !important;
  }

  /* Техническая подпись слева от картинки */
  .mid-cta-visual-meta{
    position:absolute;
    left:calc(-1 * (100% / 6 + var(--gap)));
    top:8px;

    display:flex;
    flex-direction:column;
    gap:8px;

    font-size:9px;
    line-height:1;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:rgba(255,255,255,.58);
  }

  .mid-cta-visual-meta span:first-child{
    color:#fff;
    font-family:var(--display);
    font-size:18px;
    letter-spacing:0;
  }

  /* Текст — 4 правые колонки, с заметным пустым шлюзом между фото и текстом */
  .mid-cta-copy{
    grid-column:9 / 13 !important;
    grid-row:2 !important;

    width:100% !important;
    margin:0 !important;
    padding:10px 0 0 !important;

    align-self:start !important;
    justify-self:stretch !important;
  }

  .mid-cta-copy-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:34ch !important;
    margin:0 !important;

    font-size:15px !important;
    line-height:1.55 !important;
  }

  .mid-cta-divider{
    width:42px !important;
    margin:24px 0 22px !important;
    opacity:.85;
  }

  .mid-cta-copy .mid-cta-strong{
    margin-top:0 !important;
    max-width:35ch !important;
  }

  /* Обычная, но дизайнерская кнопка:
     цельная, без лишних внутренних блоков */
  .mid-cta-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:44px !important;

    width:auto !important;
    min-width:246px !important;
    max-width:none !important;
    min-height:54px !important;

    margin-top:30px !important;
    padding:0 22px !important;

    background:#f3f3ef !important;
    color:var(--ink) !important;
    border:0 !important;

    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
  }

  .mid-cta-button::before,
  .mid-cta-button::after{
    content:none !important;
    display:none !important;
  }

  .mid-cta-button:hover{
    background:#fff !important;
    translate:0 -2px !important;
  }
}

/* Laptop */
@media (max-width:1240px) and (min-width:981px){

  .mid-cta-stage{
    row-gap:44px !important;
  }

  .mid-cta-title-fixed{
    font-size:clamp(52px,5.1vw,70px) !important;
  }

  .mid-cta-visual{
    grid-column:1 / 8 !important;
  }

  .mid-cta-visual-meta{
    display:none;
  }

  .mid-cta-copy{
    grid-column:9 / 13 !important;
    padding-top:4px !important;
  }

  .mid-cta-copy p{
    font-size:14px !important;
  }
}

/* Tablet */
@media (max-width:980px) and (min-width:701px){

  .mid-cta-redesign{
    padding-bottom:58px !important;
  }

  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:34px var(--gap) !important;
  }

  .mid-cta-headline{
    grid-column:1 / 7 !important;
  }

  .mid-cta-title-fixed > span{
    white-space:normal !important;
    width:auto !important;
  }

  .mid-cta-visual{
    grid-column:1 / 4 !important;
    grid-row:2 !important;
    width:100% !important;
  }

  .mid-cta-copy{
    grid-column:4 / 7 !important;
    grid-row:2 !important;
    padding-top:0 !important;
  }

  .mid-cta-visual-meta{
    display:none;
  }

  .mid-cta-copy p{
    max-width:none !important;
  }
}

/* Mobile */
@media (max-width:700px){

  .mid-cta-redesign{
    padding:24px 0 46px !important;
  }

  .mid-cta-redesign > .eyebrow{
    margin-bottom:28px !important;
  }

  .mid-cta-stage{
    display:flex !important;
    flex-direction:column !important;
    gap:26px !important;
  }

  .mid-cta-headline,
  .mid-cta-visual,
  .mid-cta-copy{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-title-fixed{
    font-size:clamp(42px,11.5vw,58px) !important;
    line-height:.98 !important;
  }

  .mid-cta-title-fixed > span{
    white-space:normal !important;
    width:auto !important;
  }

  .mid-cta-visual-meta{
    display:none;
  }

  .mid-cta-copy p{
    max-width:100% !important;
  }

  .mid-cta-button{
    width:100% !important;
    min-width:0 !important;
    justify-content:center !important;
  }
}


/* =========================================================
   v28 — user refinements
   ========================================================= */

/* / УСЛОВИЯ / — remove vertical separator */
.terms::before,
.terms::after,
.terms-grid::before,
.terms-grid::after,
.terms-intro::before,
.terms-intro::after,
.terms-list::before,
.terms-list::after{
  content:none !important;
  display:none !important;
}
.terms-grid,
.terms-intro,
.terms-list{
  border-left:0 !important;
  box-shadow:none !important;
}

/* / НЕ ТЕРЯЙТЕ ТЁПЛОГО КЛИЕНТА / */
@media (min-width:981px){

  /* remove space reserved for deleted technical label */
  .mid-cta-visual{
    grid-column:1 / 8 !important;
  }

  /* more air between the two title lines so Й / Ё never touch */
  .mid-cta-title-fixed{
    line-height:1.03 !important;
  }

  /* wider copy column */
  .mid-cta-copy{
    grid-column:8 / 13 !important;
    padding-top:4px !important;
  }

  .mid-cta-copy-inner{
    width:100% !important;
    max-width:none !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:44ch !important;
    font-size:15px !important;
    line-height:1.6 !important;
  }

  .mid-cta-copy .mid-cta-strong{
    max-width:46ch !important;
  }

  /* new supplied image: slightly wider, still contained */
  .mid-cta-visual img{
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    display:block !important;
    object-fit:contain !important;
  }
}

/* laptop */
@media (max-width:1240px) and (min-width:981px){
  .mid-cta-copy{
    grid-column:8 / 13 !important;
  }

  .mid-cta-copy p{
    max-width:40ch !important;
  }

  .mid-cta-title-fixed{
    line-height:1.04 !important;
  }
}

/* tablet/mobile keep copy naturally full width */
@media (max-width:980px){
  .mid-cta-title-fixed{
    line-height:1.06 !important;
  }

  .mid-cta-copy p,
  .mid-cta-copy .mid-cta-strong{
    max-width:none !important;
    width:100% !important;
  }
}


/* =========================================================
   v29 — wider copy in / НЕ ТЕРЯЙТЕ ТЁПЛОГО КЛИЕНТА /
   ========================================================= */

@media (min-width:981px){

  /* Give the right copy one more column */
  .mid-cta-copy{
    grid-column:7 / 13 !important;
    padding-left:18px !important;
  }

  .mid-cta-copy-inner{
    width:100% !important;
    max-width:none !important;
  }

  .mid-cta-copy p{
    max-width:56ch !important;
    width:100% !important;
    font-size:15px !important;
    line-height:1.58 !important;
  }

  .mid-cta-copy .mid-cta-strong{
    max-width:58ch !important;
  }

  /* Keep image from feeling cramped against the wider text */
  .mid-cta-visual{
    grid-column:1 / 7 !important;
  }
}

@media (max-width:1240px) and (min-width:981px){
  .mid-cta-copy{
    grid-column:7 / 13 !important;
    padding-left:12px !important;
  }

  .mid-cta-copy p{
    max-width:50ch !important;
  }

  .mid-cta-copy .mid-cta-strong{
    max-width:52ch !important;
  }
}


/* =========================================================
   v30 — align CTA copy strictly to grid + compact button
   ========================================================= */

@media (min-width:981px){

  /* Copy occupies exact grid columns, no arbitrary max-width */
  .mid-cta-copy{
    grid-column:8 / 13 !important;
    padding-left:0 !important;
    margin:0 !important;
  }

  .mid-cta-copy-inner{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    column-gap:var(--gap) !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .mid-cta-copy p,
  .mid-cta-divider,
  .mid-cta-button{
    grid-column:1 / 5 !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:none !important;
  }

  .mid-cta-copy .mid-cta-strong{
    max-width:none !important;
  }

  /* Button only as wide as its content */
  .mid-cta-button{
    display:inline-flex !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:52px !important;

    padding:0 18px !important;
    margin-top:26px !important;

    align-items:center !important;
    justify-content:center !important;

    white-space:nowrap !important;
  }
}

@media (max-width:1240px) and (min-width:981px){
  .mid-cta-copy{
    grid-column:8 / 13 !important;
  }

  .mid-cta-copy-inner{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }

  .mid-cta-copy p,
  .mid-cta-divider,
  .mid-cta-button{
    grid-column:1 / 5 !important;
  }
}


/* =========================================================
   v31 — STRICT 12-COLUMN GRID
   / НЕ ТЕРЯЙТЕ ТЁПЛОГО КЛИЕНТА /
   Every major edge sits on the same vertical grid lines.
   ========================================================= */

@media (min-width:981px){

  .mid-cta-redesign > .eyebrow,
  .mid-cta-stage{
    width:min(var(--max), calc(100% - 48px)) !important;
    max-width:var(--max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .mid-cta-stage{
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    column-gap:var(--gap) !important;
    grid-template-rows:auto auto !important;
    row-gap:52px !important;
    align-items:start !important;
  }

  /* 1–11: title */
  .mid-cta-headline{
    grid-column:1 / 12 !important;
    grid-row:1 !important;
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
  }

  .mid-cta-title-fixed{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    max-width:none !important;
    font-size:clamp(58px,5.35vw,86px) !important;
    line-height:1.03 !important;
    letter-spacing:-.04em !important;
  }

  .mid-cta-title-fixed > span{
    display:block !important;
    white-space:nowrap !important;
    width:auto !important;
    max-width:none !important;
  }

  /* 1–7: image, flush to grid lines */
  .mid-cta-visual{
    grid-column:1 / 8 !important;
    grid-row:2 !important;

    margin:0 !important;
    padding:0 !important;

    width:100% !important;
    max-width:none !important;

    align-self:start !important;
    justify-self:stretch !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    translate:none !important;
  }

  .mid-cta-visual img{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
    object-fit:contain !important;
  }

  /* 8–12: copy, exact same column system */
  .mid-cta-copy{
    grid-column:8 / 13 !important;
    grid-row:2 !important;

    margin:0 !important;
    padding:0 !important;

    width:100% !important;
    max-width:none !important;

    align-self:start !important;
    justify-self:stretch !important;
  }

  .mid-cta-copy-inner{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-copy p{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:0 !important;
  }

  .mid-cta-divider{
    margin-left:0 !important;
  }

  .mid-cta-button{
    margin-left:0 !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* laptop: SAME vertical grid logic */
@media (max-width:1240px) and (min-width:981px){

  .mid-cta-stage{
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    column-gap:var(--gap) !important;
  }

  .mid-cta-headline{
    grid-column:1 / 12 !important;
  }

  .mid-cta-visual{
    grid-column:1 / 8 !important;
  }

  .mid-cta-copy{
    grid-column:8 / 13 !important;
  }
}


/* =========================================================
   v32 — footer social links inline + slightly larger menu
   ========================================================= */

/* Telegram + MAX in one row */
.footer-links-inline{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:28px !important;
  flex-wrap:nowrap !important;
}

.footer-links-inline .footer-big-link{
  white-space:nowrap !important;
}

/* Slightly larger top navigation */
.nav{
  gap:26px !important;
}

.nav a{
  font-size:13px !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
}

.brand{
  font-size:13px !important;
}

.btn-header{
  font-size:12px !important;
}

/* Tablet/mobile: keep footer links usable */
@media (max-width:700px){
  .footer-links-inline{
    gap:18px !important;
    flex-wrap:wrap !important;
  }

  .nav a{
    font-size:12px !important;
  }
}


/* =========================================================
   v33 — MOBILE AUDIT / CLEANUP
   Final overrides for phones and small tablets.
   ========================================================= */

/* ---------- TABLET / MOBILE HEADER ---------- */
@media (max-width:980px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  .topbar{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:14px !important;
    min-height:56px !important;
    padding:0 18px !important;
  }

  .nav{
    display:none !important;
  }

  .brand{
    min-width:0;
    max-width:180px;
    font-size:11px !important;
    line-height:1.12 !important;
    white-space:normal !important;
  }

  .btn-header{
    min-width:0 !important;
    min-height:34px !important;
    padding-left:12px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }
}

/* ---------- PHONE GLOBAL GRID ---------- */
@media (max-width:700px){
  :root{
    --mobile-gutter:18px;
  }

  body{
    font-size:14px;
  }

  main,
  section,
  footer{
    max-width:100%;
  }

  .hero,
  .recognition,
  .works,
  .about,
  .mid-cta,
  .process,
  .terms,
  .contact-enhanced,
  .footer{
    padding-left:var(--mobile-gutter) !important;
    padding-right:var(--mobile-gutter) !important;
  }

  .hero > *,
  .recognition > *,
  .works > *,
  .about > *,
  .mid-cta > *,
  .process > *,
  .terms > *,
  .contact-enhanced > *,
  .footer > *{
    max-width:100% !important;
  }

  h1,h2,h3,p,
  .hero-copy,
  .section-heading,
  .works-intro,
  .about-title,
  .about-copy,
  .contact-heading,
  .terms-intro,
  .terms-list,
  .footer-main{
    min-width:0 !important;
    max-width:100% !important;
  }

  h1,h2,h3{
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  img{
    max-width:100%;
  }

  /* ---------- HERO ---------- */
  .hero{
    padding-top:42px !important;
    padding-bottom:72px !important;
  }

  .hero-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:30px !important;
  }

  .hero-copy{
    order:1 !important;
    width:100% !important;
  }

  .hero-photo-wrap{
    order:2 !important;
    width:100% !important;
    min-height:0 !important;
  }

  .hero h1{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(43px,12.2vw,58px) !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
  }

  .hero-title-main,
  .hero-title-accent,
  .forced-line{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    white-space:normal !important;
  }

  .hero-title-accent{
    margin-top:4px;
    font-size:.92em !important;
  }

  .hero-lead{
    width:100% !important;
    max-width:34ch !important;
    margin-top:26px !important;
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .hero-note{
    width:100% !important;
    max-width:35ch !important;
    font-size:12px !important;
    line-height:1.5 !important;
  }

  .hero-actions{
    width:100% !important;
  }

  .hero-photo{
    width:min(94%,480px) !important;
    margin:0 auto !important;
  }

  /* ---------- SECTION LABELS / TITLES ---------- */
  .eyebrow{
    margin-left:0 !important;
    padding-left:0 !important;
    font-size:9px !important;
    line-height:1.25 !important;
  }

  .section-heading,
  .works-intro,
  .about-title,
  .process-title,
  .terms-intro{
    display:block !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .section-heading h2,
  .projects-heading,
  .about-title h2,
  .process-title,
  .terms-intro h2,
  .contact-heading h2{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(38px,10.7vw,52px) !important;
    line-height:1.06 !important;
    letter-spacing:-.035em !important;
  }

  /* ---------- RECOGNITION ---------- */
  .recognition{
    padding-top:64px !important;
    padding-bottom:92px !important;
  }

  .recognition .section-heading{
    display:block !important;
    margin:0 0 46px !important;
  }

  .recognition .section-heading p{
    width:100% !important;
    max-width:34ch !important;
    margin:20px 0 0 !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }

  /* keep the requested multi-column feel on mobile */
  .recognition-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:52px 18px !important;
    width:100% !important;
    margin:0 !important;
  }

  .recognition-item,
  .recognition-item-1,
  .recognition-item-2,
  .recognition-item-3,
  .recognition-item-4,
  .recognition-item-5,
  .recognition-item-6{
    grid-column:auto !important;
    grid-row:auto !important;
    transform:none !important;
    min-height:0 !important;
    padding:14px 0 66px !important;
    width:auto !important;
  }

  .recognition-copy{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  .recognition-item .num{
    margin-bottom:16px !important;
    font-size:14px !important;
  }

  .recognition-item h3{
    width:100% !important;
    max-width:none !important;
    margin-bottom:12px !important;
    font-size:clamp(19px,5.2vw,23px) !important;
    line-height:1.1 !important;
  }

  .recognition-item p{
    width:100% !important;
    max-width:none !important;
    font-size:11.5px !important;
    line-height:1.5 !important;
  }

  .recognition-art{
    width:64px !important;
    max-width:64px !important;
    right:0 !important;
    left:auto !important;
    bottom:4px !important;
    opacity:.9 !important;
    transform:none !important;
  }

  /* ---------- PROJECTS ---------- */
  .works{
    padding-top:66px !important;
    padding-bottom:82px !important;
  }

  .works-intro{
    display:block !important;
    margin:0 0 48px !important;
  }

  .works-intro .projects-heading{
    margin:0 !important;
  }

  .projects-heading > span{
    display:inline !important;
    white-space:normal !important;
  }

  .works-intro > p{
    width:100% !important;
    max-width:36ch !important;
    margin:26px 0 0 !important;
    font-size:13px !important;
    line-height:1.58 !important;
  }

  .case,
  .case-b{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
    margin-bottom:64px !important;
  }

  .case-shot,
  .case-b .case-shot,
  .case-c .case-shot{
    order:1 !important;
    width:100% !important;
    min-height:0 !important;
    aspect-ratio:4 / 3 !important;
  }

  .case-copy,
  .case-b .case-copy{
    order:2 !important;
    width:100% !important;
    padding:0 !important;
  }

  .case-copy h3{
    width:100% !important;
    max-width:15ch !important;
    font-size:clamp(28px,8.3vw,40px) !important;
    line-height:1.04 !important;
  }

  .case-copy p{
    width:100% !important;
    max-width:38ch !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .works-cta{
    margin-bottom:38px !important;
  }

  .visual-pair{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin:0 0 78px !important;
  }

  .visual-pair-wide,
  .visual-pair-narrow{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    margin:0 !important;
  }

  /* ---------- ABOUT ---------- */
  .about{
    padding-top:62px !important;
    padding-bottom:82px !important;
  }

  .about-grid,
  .about{
    max-width:100% !important;
  }

  .about-title{
    margin-bottom:34px !important;
  }

  .about-photo-real{
    width:100% !important;
    margin:0 0 32px !important;
  }

  .about-photo-real img{
    width:min(78%,420px) !important;
    max-width:78% !important;
    margin:0 auto !important;
  }

  .about-copy{
    width:100% !important;
    margin-top:0 !important;
  }

  .about-copy p{
    max-width:38ch !important;
    font-size:13px !important;
    line-height:1.6 !important;
  }

  /* ---------- RED CTA ---------- */
  .mid-cta-redesign{
    padding:24px var(--mobile-gutter) 48px !important;
  }

  .mid-cta-redesign > .eyebrow{
    width:100% !important;
    margin:0 0 26px !important;
  }

  .mid-cta-stage{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
    width:100% !important;
    margin:0 !important;
  }

  .mid-cta-headline,
  .mid-cta-visual,
  .mid-cta-copy{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mid-cta-title-fixed{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(40px,11.6vw,54px) !important;
    line-height:1.08 !important;
  }

  .mid-cta-title-fixed > span{
    display:inline !important;
    white-space:normal !important;
    width:auto !important;
  }

  .mid-cta-visual img{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  .mid-cta-copy p,
  .mid-cta-copy .mid-cta-strong{
    width:100% !important;
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .mid-cta-divider{
    margin:20px 0 !important;
  }

  .mid-cta-button{
    display:inline-flex !important;
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:50px !important;
    padding:0 18px !important;
    margin-top:22px !important;
    font-size:11px !important;
  }

  /* ---------- PROCESS ---------- */
  .process{
    padding-top:64px !important;
    padding-bottom:82px !important;
  }

  .process-steps{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  .process-steps article{
    width:100% !important;
    min-height:0 !important;
    padding:22px 0 28px !important;
  }

  .process-steps h3{
    max-width:22ch !important;
    font-size:24px !important;
    line-height:1.08 !important;
  }

  .process-steps p{
    max-width:38ch !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }

  /* ---------- TERMS ---------- */
  .terms{
    padding-top:64px !important;
    padding-bottom:82px !important;
  }

  .terms-grid{
    display:block !important;
    width:100% !important;
  }

  .terms-intro{
    margin-bottom:38px !important;
  }

  .terms-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  .terms-list article{
    padding:20px 0 26px !important;
  }

  .terms-list h3{
    max-width:24ch !important;
    font-size:23px !important;
    line-height:1.08 !important;
  }

  .terms-list p{
    max-width:38ch !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }

  /* ---------- FIRST STEP / FORM ---------- */
  .contact-enhanced{
    padding:0 !important;
  }

  .contact-enhanced .contact-frame{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
  }

  .contact-enhanced .contact-heading{
    width:100% !important;
    padding:46px var(--mobile-gutter) 32px !important;
  }

  .contact-enhanced .contact-heading h2,
  .contact-two-line{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(39px,10.8vw,52px) !important;
    line-height:1.08 !important;
  }

  .contact-two-line > span{
    display:inline !important;
    white-space:normal !important;
  }

  .contact-enhanced .contact-form{
    width:100% !important;
    padding:34px var(--mobile-gutter) 42px !important;
  }

  .contact-form input,
  .contact-form button{
    width:100% !important;
    max-width:100% !important;
  }

  /* ---------- FOOTER / CONTACTS ---------- */
  .footer{
    padding-top:48px !important;
    padding-bottom:22px !important;
  }

  .footer-main{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
    width:100% !important;
    min-height:0 !important;
    padding-bottom:34px !important;
  }

  .footer-main > div:first-child,
  .footer-contact-side{
    grid-column:auto !important;
    width:100% !important;
    margin:0 !important;
  }

  .footer-links-inline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:18px !important;
  }

  .footer-big-link{
    font-size:clamp(34px,9.7vw,46px) !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .footer-contact-side p{
    margin:0 !important;
    max-width:34ch !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .social-links{
    margin-top:18px !important;
  }

  .footer-bottom{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px 16px !important;
    width:100% !important;
    padding-top:16px !important;
    font-size:10px !important;
    line-height:1.4 !important;
  }
}

/* Extra narrow phones */
@media (max-width:380px){
  .topbar{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .brand{
    max-width:135px !important;
    font-size:10px !important;
  }

  .btn-header{
    font-size:9px !important;
    padding-left:10px !important;
  }

  .recognition-grid{
    gap:46px 14px !important;
  }

  .recognition-item h3{
    font-size:18px !important;
  }

  .recognition-item p{
    font-size:11px !important;
  }

  .footer-links-inline{
    gap:12px !important;
  }

  .footer-big-link{
    font-size:31px !important;
  }
}


/* =========================================================
   v34 — mobile about spacing + footer inline links + education popup
   ========================================================= */

/* ABOUT: remove excessive mobile gap below image */
@media (max-width:700px){
  .about-photo-real{
    margin-bottom:16px !important;
  }

  .about-photo-real img{
    margin-bottom:0 !important;
  }

  .about-copy{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* Telegram + MAX forced onto one row on mobile */
  .footer-links-inline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:baseline !important;
    gap:16px !important;
    width:max-content !important;
    max-width:100% !important;
  }

  .footer-links-inline .footer-big-link{
    white-space:nowrap !important;
    width:auto !important;
    flex:0 0 auto !important;
    font-size:clamp(28px,8.2vw,38px) !important;
  }
}

@media (max-width:380px){
  .footer-links-inline{
    gap:10px !important;
  }

  .footer-links-inline .footer-big-link{
    font-size:28px !important;
  }
}

/* About popup trigger */
.about-popup-trigger{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  margin:0;
  font:inherit;
  line-height:inherit;
  text-align:left;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Popup */
.about-education-popup{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.about-education-popup.is-open{
  display:flex;
}

.about-education-popup__backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,20,20,.62);
  backdrop-filter:blur(6px);
}

.about-education-popup__dialog{
  position:relative;
  z-index:1;

  width:min(1180px,96vw);
  max-height:90vh;

  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.8fr);
  gap:0;

  background:#ededeb;
  color:#242424;
  overflow:auto;
}

.about-education-popup__media{
  min-width:0;
  background:#d8d8d4;
}

.about-education-popup__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.about-education-popup__copy{
  padding:42px 38px 40px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.about-education-popup__copy .eyebrow{
  margin-bottom:auto;
  color:#6b6b68;
}

.about-education-popup__copy h3{
  margin:72px 0 18px;
  font-family:var(--display,"Arial Narrow",sans-serif);
  font-size:clamp(42px,4vw,68px);
  line-height:.96;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

.about-education-popup__copy p{
  margin:0;
  max-width:32ch;
  font-size:16px;
  line-height:1.55;
}

.about-education-popup__close{
  position:absolute;
  top:14px;
  right:16px;
  z-index:3;

  width:40px;
  height:40px;

  border:0;
  background:rgba(255,255,255,.82);
  color:#222;
  cursor:pointer;

  font-size:28px;
  line-height:1;
}

body.popup-open{
  overflow:hidden !important;
}

@media (max-width:700px){
  .about-education-popup{
    padding:12px;
    align-items:flex-end;
  }

  .about-education-popup__dialog{
    width:100%;
    max-height:92vh;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
  }

  .about-education-popup__media{
    max-height:52vh;
  }

  .about-education-popup__media img{
    width:100%;
    height:auto;
    max-height:52vh;
    object-fit:contain;
  }

  .about-education-popup__copy{
    padding:24px 20px 26px;
  }

  .about-education-popup__copy .eyebrow{
    margin-bottom:18px !important;
  }

  .about-education-popup__copy h3{
    margin:0 0 14px;
    font-size:clamp(34px,10vw,48px);
    line-height:1.02;
  }

  .about-education-popup__copy p{
    max-width:none;
    font-size:14px;
    line-height:1.5;
  }

  .about-education-popup__close{
    top:10px;
    right:10px;
  }
}


/* =========================================================
   v35 — REAL FIXES for mobile
   ========================================================= */

@media (max-width:700px){

  /* ABOUT:
     Earlier base CSS forced .about-photo to aspect-ratio:3/4.
     That created a tall empty box under the actual collage.
     Kill that inherited sizing completely.
  */
  .about-layout{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .about-photo,
  .about-photo-real{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    align-self:stretch !important;

    margin:0 0 12px !important;
    padding:0 !important;
  }

  .about-photo-real img{
    display:block !important;
    width:min(78%,420px) !important;
    max-width:78% !important;
    height:auto !important;
    aspect-ratio:auto !important;

    margin:0 auto !important;
    padding:0 !important;
    translate:none !important;
  }

  .about-copy{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .about-copy > p:first-child{
    margin-top:0 !important;
  }

  /* FOOTER:
     force Telegram + MAX into one physical row */
  .footer-links.footer-links-inline{
    display:grid !important;
    grid-template-columns:max-content max-content !important;
    grid-auto-flow:column !important;
    align-items:baseline !important;
    justify-content:start !important;

    width:100% !important;
    max-width:100% !important;

    gap:14px !important;
    margin:0 !important;

    overflow:visible !important;
  }

  .footer-links.footer-links-inline .footer-big-link{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    white-space:nowrap !important;
    flex:none !important;

    font-size:clamp(26px,7.7vw,36px) !important;
    line-height:1 !important;
    letter-spacing:-.025em !important;
  }
}

@media (max-width:380px){
  .footer-links.footer-links-inline{
    gap:10px !important;
  }

  .footer-links.footer-links-inline .footer-big-link{
    font-size:25px !important;
  }
}


/* =========================================================
   v36 — popup fix + clean recognition icons + safer line-height
   ========================================================= */

/* Remove visible halos/backgrounds under recognition icons */
.recognition-art{
  filter:none !important;
  box-shadow:none !important;
  background:transparent !important;
  opacity:1 !important;
}

/* More breathing room in condensed display headings.
   Prevent Й / Ё diacritics from colliding with the line above. */
.hero h1,
.section-heading h2,
.projects-heading,
.about-title h2,
.process-title,
.terms-intro h2,
.contact-heading h2,
.mid-cta-title-fixed{
  line-height:1.08 !important;
}

/* Card headings also need a little more air */
.recognition-item h3,
.case-copy h3,
.process-steps h3,
.terms-list h3{
  line-height:1.16 !important;
}

@media (max-width:700px){
  .hero h1,
  .section-heading h2,
  .projects-heading,
  .about-title h2,
  .process-title,
  .terms-intro h2,
  .contact-heading h2,
  .mid-cta-title-fixed,
  .contact-two-line{
    line-height:1.11 !important;
  }

  .recognition-item h3,
  .case-copy h3,
  .process-steps h3,
  .terms-list h3{
    line-height:1.18 !important;
  }

  .recognition-art{
    filter:none !important;
    box-shadow:none !important;
    background:transparent !important;
    opacity:1 !important;
  }
}


/* =========================================================
   FINAL CONTACT BLOCK — editorial asymmetry
   ========================================================= */

.contact-editorial{
  padding:120px 0;
  background:#f3f3f1;
}

.contact-editorial__shell{
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  align-items:start;
}

.contact-editorial__lead{
  grid-column:1 / 9;

  min-height:720px;
  padding:34px 42px 42px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  position:relative;
  overflow:hidden;

  background:var(--red);
  color:#fff;
}

.contact-editorial__eyebrow{
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.88;
}

.contact-editorial__lead-inner{
  max-width:760px;
  margin-top:auto;
}

.contact-editorial__title{
  margin:0;

  font-family:var(--display,"Arial Narrow",sans-serif);
  font-size:clamp(60px,5.85vw,96px);
  line-height:1.04;
  letter-spacing:-.035em;
  text-transform:uppercase;

  color:#fff;
}

.contact-editorial__title span{
  display:block;
}

.contact-editorial__desc{
  max-width:580px;
  margin:32px 0 0;

  font-size:18px;
  line-height:1.5;
  color:rgba(255,255,255,.9);
}

.contact-editorial__form-card{
  grid-column:8 / 13;

  align-self:center;
  position:relative;
  z-index:2;

  margin-top:62px;
  margin-bottom:62px;

  padding:46px 40px 40px;

  background:#f7f6f2;
  color:var(--ink);
  border:1px solid rgba(32,32,32,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.08);
}

.contact-editorial__form-head{
  margin-bottom:34px;
}

.contact-editorial__form-head h3{
  margin:0 0 16px;

  font-family:var(--display,"Arial Narrow",sans-serif);
  font-size:clamp(36px,3vw,54px);
  line-height:1.04;
  letter-spacing:-.025em;
  text-transform:uppercase;
}

.contact-editorial__form-head p{
  max-width:30ch;
  margin:0;

  font-size:13px;
  line-height:1.55;
  color:#6d6d69;
}

.contact-editorial__form{
  display:flex;
  flex-direction:column;
  gap:26px;
}

.contact-editorial__field{
  display:block;
}

.contact-editorial__field span{
  display:block;
  margin-bottom:10px;

  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.contact-editorial__field input{
  width:100%;
  padding:0 0 14px;

  border:0;
  border-bottom:1px solid rgba(43,43,43,.42);
  border-radius:0;
  background:transparent;

  outline:none;

  font:inherit;
  font-size:22px;
  line-height:1.1;
  color:var(--ink);

  transition:border-color .2s ease;
}

.contact-editorial__field input::placeholder{
  color:rgba(43,43,43,.4);
}

.contact-editorial__field input:focus{
  border-bottom-color:var(--red);
}

.contact-editorial__btn{
  width:max-content;
  min-width:0;
  min-height:52px;

  margin-top:4px;
  padding:0 20px;

  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  border:0;
  background:var(--red);
  color:#fff;

  cursor:pointer;

  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;

  transition:transform .2s ease, background .2s ease;
}

.contact-editorial__btn:hover{
  transform:translateY(-2px);
  background:#bf5553;
}

@media (max-width:1180px){
  .contact-editorial__lead{
    grid-column:1 / 9;
    min-height:650px;
  }

  .contact-editorial__form-card{
    grid-column:8 / 13;
    padding:38px 30px 34px;
  }

  .contact-editorial__title{
    font-size:clamp(54px,5.8vw,78px);
  }
}

@media (max-width:860px){
  .contact-editorial{
    padding:78px 0;
  }

  .contact-editorial__shell{
    width:calc(100% - 36px);
    display:block;
  }

  .contact-editorial__lead{
    min-height:auto;
    padding:24px 22px 30px;
  }

  .contact-editorial__lead-inner{
    margin-top:92px;
  }

  .contact-editorial__title{
    font-size:clamp(42px,11.5vw,60px);
    line-height:1.08;
  }

  .contact-editorial__desc{
    max-width:34ch;
    margin-top:22px;
    font-size:14px;
    line-height:1.55;
  }

  .contact-editorial__form-card{
    margin:-14px 0 0;
    padding:28px 22px 28px;

    box-shadow:0 14px 34px rgba(0,0,0,.08);
  }

  .contact-editorial__form-head{
    margin-bottom:28px;
  }

  .contact-editorial__form-head h3{
    font-size:36px;
    line-height:1.08;
  }

  .contact-editorial__form-head p{
    max-width:34ch;
    font-size:13px;
  }

  .contact-editorial__field input{
    font-size:20px;
  }

  .contact-editorial__btn{
    width:max-content;
  }
}

@media (max-width:480px){
  .contact-editorial{
    padding:62px 0;
  }

  .contact-editorial__shell{
    width:calc(100% - 28px);
  }

  .contact-editorial__lead{
    padding:22px 18px 26px;
  }

  .contact-editorial__lead-inner{
    margin-top:72px;
  }

  .contact-editorial__title{
    font-size:clamp(38px,11.3vw,50px);
  }

  .contact-editorial__form-card{
    padding:26px 18px 24px;
  }

  .contact-editorial__form-head h3{
    font-size:32px;
  }

  .contact-editorial__btn{
    width:100%;
  }
}


/* =========================================================
   v38 — FIX CONTACT COMPOSITION
   Both panels must occupy the SAME grid row.
   ========================================================= */

@media (min-width:861px){

  .contact-editorial__shell{
    grid-template-rows:1fr !important;
  }

  .contact-editorial__lead{
    grid-column:1 / 9 !important;
    grid-row:1 !important;
  }

  .contact-editorial__form-card{
    grid-column:8 / 13 !important;
    grid-row:1 !important;

    align-self:center !important;

    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}

@media (max-width:1180px) and (min-width:861px){
  .contact-editorial__lead{
    grid-column:1 / 9 !important;
    grid-row:1 !important;
  }

  .contact-editorial__form-card{
    grid-column:8 / 13 !important;
    grid-row:1 !important;
  }
}


/* =========================================================
   v39 — CONTACT / bolder editorial composition
   ========================================================= */

.contact-editorial{
  padding:118px 0 132px !important;
  background:#f1f1ef !important;
  overflow:hidden !important;
}

.contact-editorial__shell{
  width:min(var(--max),calc(100% - 48px)) !important;
  margin:0 auto !important;

  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  grid-template-rows:1fr !important;
  column-gap:var(--gap) !important;
  align-items:start !important;

  position:relative !important;
}

/* The red field is deliberately oversized and editorial */
.contact-editorial__lead{
  grid-column:1 / 10 !important;
  grid-row:1 !important;

  min-height:760px !important;
  margin:0 !important;
  padding:32px 40px 38px !important;

  display:grid !important;
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  grid-template-rows:auto 1fr !important;
  column-gap:20px !important;

  position:relative !important;
  overflow:hidden !important;

  background:var(--red) !important;
  color:#fff !important;
}

/* subtle oversized line in the background — no numbers */
.contact-editorial__lead::after{
  content:"";
  position:absolute;
  left:40px;
  right:40px;
  top:112px;

  height:1px;
  background:rgba(255,255,255,.24);
}

.contact-editorial__eyebrow{
  grid-column:1 / 4 !important;
  grid-row:1 !important;

  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  opacity:.9 !important;
}

.contact-editorial__meta{
  grid-column:6 / 9 !important;
  grid-row:1 !important;

  display:flex !important;
  justify-content:flex-end !important;
  gap:18px !important;

  font-size:9px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.64) !important;
}

.contact-editorial__lead-inner{
  grid-column:1 / 9 !important;
  grid-row:2 !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;

  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

.contact-editorial__title{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;

  font-family:var(--display,"Arial Narrow",sans-serif) !important;
  font-size:clamp(62px,5.9vw,98px) !important;
  line-height:1.03 !important;
  letter-spacing:-.04em !important;
  text-transform:uppercase !important;
  color:#fff !important;
}

.contact-editorial__title span{
  display:block !important;
}

.contact-editorial__lead-bottom{
  margin-top:34px !important;

  display:grid !important;
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  gap:20px !important;
  align-items:end !important;
}

.contact-editorial__desc{
  grid-column:1 / 6 !important;

  max-width:none !important;
  margin:0 !important;

  font-size:17px !important;
  line-height:1.5 !important;
  color:rgba(255,255,255,.9) !important;
}

.contact-editorial__mark{
  grid-column:8 !important;
  justify-self:end !important;
  align-self:end !important;

  font-size:56px !important;
  line-height:.8 !important;
  font-weight:300 !important;
  color:rgba(255,255,255,.82) !important;
}

/* The form sits like an inserted editorial sheet */
.contact-editorial__form-card{
  grid-column:8 / 13 !important;
  grid-row:1 !important;

  align-self:center !important;
  justify-self:stretch !important;

  margin:44px 0 0 !important;
  padding:28px 34px 34px !important;

  position:relative !important;
  z-index:3 !important;

  background:#f7f6f2 !important;
  color:var(--ink) !important;
  border:1px solid rgba(32,32,32,.13) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.09) !important;
}

/* offset red tab gives the card a more graphic edge */
.contact-editorial__form-card::before{
  content:"";
  position:absolute;
  left:-18px;
  top:24px;
  width:18px;
  height:72px;
  background:#b84f4e;
}

.contact-editorial__form-label{
  margin-bottom:44px !important;

  font-size:9px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#77736d !important;
}

.contact-editorial__form-head{
  display:grid !important;
  grid-template-columns:minmax(0,1.25fr) minmax(150px,.75fr) !important;
  gap:26px !important;
  align-items:end !important;

  margin-bottom:42px !important;
}

.contact-editorial__form-head h3{
  margin:0 !important;

  font-family:var(--display,"Arial Narrow",sans-serif) !important;
  font-size:clamp(40px,3.4vw,58px) !important;
  line-height:1.02 !important;
  letter-spacing:-.03em !important;
  text-transform:uppercase !important;
}

.contact-editorial__form-head p{
  margin:0 !important;
  max-width:none !important;

  font-size:11px !important;
  line-height:1.5 !important;
  color:#716f6a !important;
}

.contact-editorial__form{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:26px !important;
}

.contact-editorial__field{
  display:block !important;
  margin:0 !important;
}

.contact-editorial__field span{
  display:block !important;
  margin-bottom:9px !important;

  font-size:9px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}

.contact-editorial__field input{
  width:100% !important;
  padding:0 0 13px !important;

  border:0 !important;
  border-bottom:1px solid rgba(43,43,43,.42) !important;
  border-radius:0 !important;
  background:transparent !important;
  outline:none !important;

  font:inherit !important;
  font-size:21px !important;
  line-height:1.15 !important;
  color:var(--ink) !important;
}

.contact-editorial__field input::placeholder{
  color:rgba(43,43,43,.35) !important;
}

.contact-editorial__field input:focus{
  border-bottom-color:var(--red) !important;
}

.contact-editorial__btn{
  width:max-content !important;
  min-width:0 !important;
  min-height:50px !important;

  margin-top:2px !important;
  padding:0 18px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;

  border:0 !important;
  background:var(--red) !important;
  color:#fff !important;

  cursor:pointer !important;

  font-size:10px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

.contact-editorial__btn:hover{
  transform:translateY(-2px) !important;
  background:#bb5050 !important;
}

/* laptop */
@media (max-width:1180px) and (min-width:861px){
  .contact-editorial__lead{
    grid-column:1 / 10 !important;
    min-height:680px !important;
  }

  .contact-editorial__form-card{
    grid-column:8 / 13 !important;
    padding:26px 28px 30px !important;
  }

  .contact-editorial__title{
    font-size:clamp(54px,5.8vw,78px) !important;
  }

  .contact-editorial__form-head{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .contact-editorial__form-label{
    margin-bottom:34px !important;
  }
}

/* mobile: same character, no awkward overlap */
@media (max-width:860px){
  .contact-editorial{
    padding:72px 0 82px !important;
  }

  .contact-editorial__shell{
    width:calc(100% - 36px) !important;
    display:block !important;
  }

  .contact-editorial__lead{
    min-height:auto !important;
    padding:22px 18px 26px !important;

    display:block !important;
  }

  .contact-editorial__lead::after{
    left:18px !important;
    right:18px !important;
    top:74px !important;
  }

  .contact-editorial__meta{
    position:absolute !important;
    top:22px !important;
    right:18px !important;
    gap:10px !important;
  }

  .contact-editorial__lead-inner{
    padding-top:102px !important;
  }

  .contact-editorial__title{
    font-size:clamp(40px,11.3vw,56px) !important;
    line-height:1.08 !important;
  }

  .contact-editorial__lead-bottom{
    display:block !important;
    margin-top:24px !important;
  }

  .contact-editorial__desc{
    max-width:34ch !important;
    font-size:14px !important;
  }

  .contact-editorial__mark{
    margin-top:30px !important;
    text-align:right !important;
    font-size:44px !important;
  }

  .contact-editorial__form-card{
    margin:-16px 0 0 !important;
    padding:24px 18px 26px !important;

    box-shadow:0 14px 34px rgba(0,0,0,.08) !important;
  }

  .contact-editorial__form-card::before{
    display:none !important;
  }

  .contact-editorial__form-label{
    margin-bottom:28px !important;
  }

  .contact-editorial__form-head{
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin-bottom:30px !important;
  }

  .contact-editorial__form-head h3{
    font-size:34px !important;
    line-height:1.08 !important;
  }

  .contact-editorial__form-head p{
    max-width:34ch !important;
    font-size:12px !important;
  }

  .contact-editorial__field input{
    font-size:20px !important;
  }

  .contact-editorial__btn{
    width:max-content !important;
  }
}

@media (max-width:420px){
  .contact-editorial__meta{
    display:none !important;
  }

  .contact-editorial__lead-inner{
    padding-top:84px !important;
  }

  .contact-editorial__btn{
    width:100% !important;
  }
}


/* =========================================================
   v40 — CONTACT: tighter vertical rhythm + refined details
   ========================================================= */

@media (min-width:861px){

  .contact-editorial{
    padding:84px 0 96px !important;
  }

  .contact-editorial__lead{
    min-height:620px !important;
    padding:28px 36px 30px !important;
  }

  .contact-editorial__lead::after{
    left:36px !important;
    right:36px !important;
    top:96px !important;
  }

  .contact-editorial__title{
    font-size:clamp(58px,5.45vw,90px) !important;
    line-height:1.035 !important;
  }

  .contact-editorial__lead-bottom{
    margin-top:26px !important;
  }

  .contact-editorial__desc{
    grid-column:1 / 6 !important;
    font-size:16px !important;
    line-height:1.48 !important;
  }

  .contact-editorial__mark{
    font-size:46px !important;
    opacity:.9 !important;
  }

  .contact-editorial__form-card{
    margin:28px 0 0 !important;
    padding:24px 30px 30px !important;
  }

  .contact-editorial__form-card::before{
    top:22px !important;
    height:58px !important;
    width:14px !important;
    left:-14px !important;
  }

  .contact-editorial__form-label{
    margin-bottom:32px !important;
  }

  .contact-editorial__form-head{
    margin-bottom:30px !important;
    gap:22px !important;
  }

  .contact-editorial__form-head h3{
    font-size:clamp(38px,3.15vw,54px) !important;
    line-height:1.03 !important;
  }

  .contact-editorial__form-head p{
    font-size:10.5px !important;
    line-height:1.45 !important;
  }

  .contact-editorial__form{
    gap:22px !important;
  }

  .contact-editorial__field input{
    font-size:20px !important;
    padding-bottom:11px !important;
  }

  .contact-editorial__btn{
    min-height:48px !important;
    padding:0 17px !important;
    gap:18px !important;
  }

  /* detail: tiny corner cue to make the white sheet feel "placed" */
  .contact-editorial__form-card::after{
    content:"";
    position:absolute;
    right:22px;
    bottom:22px;
    width:34px;
    height:1px;
    background:rgba(36,36,36,.22);
  }
}

@media (max-width:1180px) and (min-width:861px){
  .contact-editorial{
    padding:74px 0 86px !important;
  }

  .contact-editorial__lead{
    min-height:570px !important;
  }

  .contact-editorial__title{
    font-size:clamp(52px,5.35vw,72px) !important;
  }

  .contact-editorial__form-card{
    margin-top:20px !important;
  }
}

@media (max-width:860px){
  .contact-editorial{
    padding:54px 0 66px !important;
  }

  .contact-editorial__lead{
    padding:20px 18px 24px !important;
  }

  .contact-editorial__lead::after{
    top:66px !important;
  }

  .contact-editorial__lead-inner{
    padding-top:86px !important;
  }

  .contact-editorial__title{
    font-size:clamp(39px,11vw,54px) !important;
  }

  .contact-editorial__lead-bottom{
    margin-top:20px !important;
  }

  .contact-editorial__mark{
    margin-top:20px !important;
  }

  .contact-editorial__form-card{
    margin:-12px 0 0 !important;
    padding:22px 18px 24px !important;
  }

  .contact-editorial__form-label{
    margin-bottom:22px !important;
  }

  .contact-editorial__form-head{
    margin-bottom:24px !important;
  }
}


/* =========================================================
   v41 — CONTACT visual polish + phone validation + consent
   ========================================================= */

@media (min-width:861px){
  .contact-editorial__lead{
    min-height:590px !important;
  }

  .contact-editorial__form-card{
    margin-top:18px !important;
    padding:22px 30px 28px !important;
  }

  .contact-editorial__form-label{
    margin-bottom:26px !important;
  }

  .contact-editorial__form-head{
    margin-bottom:26px !important;
  }

  .contact-editorial__form-head h3{
    font-size:clamp(38px,3vw,52px) !important;
  }

  .contact-editorial__form{
    gap:20px !important;
  }

  /* More editorial rhythm: fields align on a clean baseline */
  .contact-editorial__field{
    position:relative !important;
    padding-top:2px !important;
  }

  .contact-editorial__field span{
    margin-bottom:8px !important;
  }

  .contact-editorial__field input{
    font-size:19px !important;
    padding-bottom:10px !important;
  }

  /* Make the CTA card slightly less boxy */
  .contact-editorial__form-card{
    clip-path:polygon(
      0 0,
      calc(100% - 18px) 0,
      100% 18px,
      100% 100%,
      0 100%
    );
  }

  .contact-editorial__form-card::after{
    right:18px !important;
    bottom:18px !important;
    width:28px !important;
  }

  /* Visual bridge from red panel to form */
  .contact-editorial__lead::before{
    content:"";
    position:absolute;
    right:0;
    top:46%;
    width:64px;
    height:1px;
    background:rgba(255,255,255,.42);
  }
}

/* Consent checkbox */
.contact-editorial__consent{
  display:grid !important;
  grid-template-columns:18px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:start !important;

  margin-top:0 !important;
  cursor:pointer !important;
}

.contact-editorial__consent > input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.contact-editorial__check{
  width:18px !important;
  height:18px !important;

  display:block !important;
  position:relative !important;
  margin-top:1px !important;

  border:1px solid rgba(43,43,43,.38) !important;
  background:transparent !important;
}

.contact-editorial__consent > input:checked + .contact-editorial__check{
  background:var(--red) !important;
  border-color:var(--red) !important;
}

.contact-editorial__consent > input:checked + .contact-editorial__check::after{
  content:"" !important;
  position:absolute !important;
  left:5px !important;
  top:2px !important;

  width:5px !important;
  height:9px !important;

  border-right:1.5px solid #fff !important;
  border-bottom:1.5px solid #fff !important;
  transform:rotate(42deg) !important;
}

.contact-editorial__consent-text{
  font-size:10px !important;
  line-height:1.45 !important;
  color:#76736e !important;
}

.contact-editorial__consent-text a{
  color:inherit !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}

.contact-editorial__consent:has(input:focus-visible) .contact-editorial__check{
  outline:2px solid rgba(202,90,88,.25) !important;
  outline-offset:2px !important;
}

/* Validation states */
.contact-editorial__field.is-error input{
  border-bottom-color:#a63737 !important;
}

.contact-editorial__error{
  display:block !important;
  min-height:14px !important;
  margin-top:5px !important;

  font-size:9px !important;
  line-height:1.35 !important;
  color:#a63737 !important;
}

.contact-editorial__consent.is-error .contact-editorial__check{
  border-color:#a63737 !important;
}

.contact-editorial__success{
  display:none;
  margin:0 !important;
  font-size:10px !important;
  line-height:1.45 !important;
  color:#4d6c52 !important;
}

.contact-editorial__success.is-visible{
  display:block !important;
}

/* Button disabled / valid feedback */
.contact-editorial__btn{
  transition:transform .2s ease, background .2s ease, opacity .2s ease !important;
}

.contact-editorial__btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

@media (max-width:860px){
  .contact-editorial__form{
    gap:18px !important;
  }

  .contact-editorial__consent{
    grid-template-columns:18px minmax(0,1fr) !important;
  }

  .contact-editorial__consent-text{
    font-size:10px !important;
  }

  .contact-editorial__form-card{
    clip-path:none !important;
  }
}


/* =========================================================
   v42 — sticky menu + terms image + remove red-block arrow
   ========================================================= */

/* Sticky navigation */
.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  background:rgba(237,237,235,.88) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  border-bottom:1px solid rgba(35,35,35,.08) !important;
  transition:
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease !important;
}

.topbar.is-scrolled{
  background:rgba(237,237,235,.96) !important;
  box-shadow:0 8px 28px rgba(20,20,20,.06) !important;
  border-bottom-color:rgba(35,35,35,.12) !important;
}

/* Remove any leftover decorative arrow from the contact block */
.contact-editorial__mark{
  display:none !important;
}

/* / УСЛОВИЯ / — image under the intro copy */
.terms-intro-visual{
  margin-top:34px;
  width:100%;
  max-width:560px;
}

.terms-intro-visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* Give the left side a stronger editorial silhouette */
@media (min-width:981px){
  .terms-intro{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .terms-intro-visual{
    margin-top:40px !important;
    width:min(100%,540px) !important;
  }
}

@media (max-width:980px){
  .terms-intro-visual{
    margin-top:28px !important;
    max-width:520px !important;
  }
}

@media (max-width:700px){
  .topbar{
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }

  .terms-intro-visual{
    margin-top:24px !important;
    width:100% !important;
    max-width:none !important;
  }
}


/* =========================================================
   v43 — fixed dark menu + icon motion + universal button hover
   ========================================================= */

/* HEADER — truly fixed, dark, always visible */
.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;

  background:rgba(44,44,44,.97) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;

  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;

  box-shadow:none !important;
}

.topbar.is-scrolled{
  background:rgba(44,44,44,.985) !important;
  color:#fff !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
  box-shadow:0 8px 26px rgba(0,0,0,.10) !important;
}

/* compensate fixed header so page content doesn't jump underneath */
body{
  padding-top:58px !important;
}

@media (max-width:980px){
  body{
    padding-top:56px !important;
  }
}

@media (max-width:700px){
  body{
    padding-top:56px !important;
  }
}

/* Recognition icons — subtle floating motion, different timings */
.recognition-art{
  will-change:transform;
  animation:recognitionFloat 4.8s ease-in-out infinite;
  transform-origin:center center;
}

.recognition-item:nth-child(2) .recognition-art{animation-delay:-.8s;animation-duration:5.2s}
.recognition-item:nth-child(3) .recognition-art{animation-delay:-1.6s;animation-duration:4.6s}
.recognition-item:nth-child(4) .recognition-art{animation-delay:-2.4s;animation-duration:5.4s}
.recognition-item:nth-child(5) .recognition-art{animation-delay:-3.2s;animation-duration:4.9s}
.recognition-item:nth-child(6) .recognition-art{animation-delay:-4s;animation-duration:5.6s}

@keyframes recognitionFloat{
  0%,100%{
    transform:translate3d(0,0,0) rotate(0deg);
  }
  50%{
    transform:translate3d(0,-7px,0) rotate(.8deg);
  }
}

/* a little extra response when hovering the card */
@media (hover:hover){
  .recognition-item:hover .recognition-art{
    animation-play-state:paused;
    transform:translateY(-8px) scale(1.035);
    transition:transform .28s ease;
  }
}

/* ALL BUTTONS — visible color change on hover */
.btn,
.btn-header,
.mid-cta-button,
.contact-editorial__btn,
.about-popup-trigger,
button{
  transition:
    background-color .24s ease,
    color .24s ease,
    border-color .24s ease,
    transform .24s ease,
    opacity .24s ease !important;
}

@media (hover:hover){

  /* red buttons */
  .btn-red:hover,
  .contact-editorial__btn:hover{
    background:#2c2c2c !important;
    border-color:#2c2c2c !important;
    color:#fff !important;
  }

  /* light buttons on red/dark fields */
  .btn-light:hover,
  .mid-cta-button:hover{
    background:#2c2c2c !important;
    border-color:#2c2c2c !important;
    color:#fff !important;
  }

  /* header CTA: invert to light */
  .btn-header:hover,
  .topbar-cta:hover{
    background:#f2f1ed !important;
    border-color:#f2f1ed !important;
    color:#2c2c2c !important;
    opacity:1 !important;
  }

  .btn-header:hover b{
    border-left-color:rgba(44,44,44,.18) !important;
  }

  /* outline/dark buttons */
  .btn-outline-dark:hover{
    background:var(--red) !important;
    border-color:var(--red) !important;
    color:#fff !important;
  }

  /* about text-button gets a clear red hover */
  .about-popup-trigger:hover{
    color:var(--red) !important;
  }

  /* generic fallback for plain buttons not covered above */
  button:not(.about-education-popup__close):not(.contact-editorial__btn):hover{
    transform:translateY(-1px);
  }

  .about-education-popup__close:hover{
    background:var(--red) !important;
    color:#fff !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .recognition-art{
    animation:none !important;
  }
}


section[id]{
  scroll-margin-top:76px;
}


/* =========================================================
   v44 — image framing + new about portrait + larger popup
   ========================================================= */

/* Decorative image pair:
   adjust crop to keep the important subjects in-frame. */
.visual-pair-wide img{
  object-position:center 38% !important;
}

.visual-pair-narrow img{
  object-position:center 33% !important;
}

/* About image — use the new transparent portrait and give it more presence */
.about-photo-real{
  overflow:visible !important;
}

.about-photo-real img{
  width:112% !important;
  max-width:none !important;
  height:auto !important;
  margin-left:-6% !important;
  object-fit:contain !important;
  object-position:center top !important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.08)) !important;
}

/* Education popup — larger so collage + copy breathe properly */
.about-education-popup{
  padding:14px !important;
}

.about-education-popup__dialog{
  width:min(1480px,98vw) !important;
  max-height:94vh !important;
  grid-template-columns:minmax(0,2fr) minmax(360px,.9fr) !important;
  overflow:hidden !important;
}

.about-education-popup__media{
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
}

.about-education-popup__media img{
  width:100% !important;
  height:100% !important;
  max-height:90vh !important;
  object-fit:contain !important;
  object-position:center center !important;
}

.about-education-popup__copy{
  min-width:0 !important;
  padding:48px 42px 42px !important;
}

.about-education-popup__copy h3{
  margin:64px 0 22px !important;
  font-size:clamp(48px,4.2vw,76px) !important;
  line-height:1.02 !important;
}

.about-education-popup__copy p{
  max-width:34ch !important;
  font-size:17px !important;
  line-height:1.55 !important;
}

.about-education-popup__close{
  top:16px !important;
  right:16px !important;
  width:44px !important;
  height:44px !important;
}

/* Tablet */
@media (max-width:980px){
  .visual-pair-wide img{
    object-position:center 35% !important;
  }

  .visual-pair-narrow img{
    object-position:center 30% !important;
  }

  .about-photo-real img{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
  }

  .about-education-popup__dialog{
    width:min(94vw,1100px) !important;
    grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr) !important;
  }
}

/* Mobile */
@media (max-width:700px){
  .visual-pair-wide img{
    object-position:center 32% !important;
  }

  .visual-pair-narrow img{
    object-position:center 28% !important;
  }

  .about-photo-real img{
    width:min(88%,430px) !important;
    max-width:88% !important;
    margin:0 auto !important;
  }

  .about-education-popup{
    padding:8px !important;
    align-items:center !important;
  }

  .about-education-popup__dialog{
    width:100% !important;
    max-height:96vh !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1.15fr) auto !important;
    overflow:auto !important;
  }

  .about-education-popup__media{
    max-height:60vh !important;
    padding:10px !important;
  }

  .about-education-popup__media img{
    width:100% !important;
    height:auto !important;
    max-height:58vh !important;
  }

  .about-education-popup__copy{
    padding:22px 18px 24px !important;
  }

  .about-education-popup__copy h3{
    margin:0 0 14px !important;
    font-size:clamp(34px,10vw,48px) !important;
  }

  .about-education-popup__copy p{
    font-size:14px !important;
  }
}


/* =========================================================
   v45 — CASE 04 / FAVBOILER
   ========================================================= */

.case-d{
  max-width:var(--max);
  margin:0 auto 96px;

  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
  align-items:stretch;
}

.case-d .case-copy{
  grid-column:1 / span 5;
  padding:16px clamp(12px,1.6vw,26px) 16px 0;
}

.case-d .case-shot{
  grid-column:6 / span 7;

  position:relative;
  overflow:hidden;

  width:100%;
  min-height:0;
  aspect-ratio:3 / 2;

  background:#fff;
  cursor:pointer;
}

.case-shot-favboiler .favboiler-img{
  position:absolute;
  inset:0;

  display:block;
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center center;

  scale:1 !important;

  transition:
    opacity .45s ease,
    transform .55s cubic-bezier(.2,.7,.2,1) !important;
}

.case-shot-favboiler .favboiler-img-default{
  opacity:1;
  z-index:1;
}

.case-shot-favboiler .favboiler-img-hover{
  opacity:0;
  z-index:2;
  transform:scale(1.015);
}

/* override generic project-image zoom for this stacked hover */
.case-d:hover .case-shot img{
  scale:1 !important;
}

@media (hover:hover){
  .case-d:hover .favboiler-img-default{
    opacity:0;
    transform:scale(1.025);
  }

  .case-d:hover .favboiler-img-hover{
    opacity:1;
    transform:scale(1);
  }
}

/* tablet */
@media (max-width:980px){
  .case-d{
    display:flex;
    flex-direction:column;
    gap:26px;
    margin-bottom:72px;
  }

  .case-d .case-shot{
    order:1;
    width:100%;
    aspect-ratio:3 / 2;
  }

  .case-d .case-copy{
    order:2;
    width:100%;
    padding:0;
  }
}

/* mobile */
@media (max-width:700px){
  .case-d{
    gap:24px !important;
    margin-bottom:64px !important;
  }

  .case-d .case-shot{
    order:1 !important;
    width:100% !important;
    aspect-ratio:3 / 2 !important;
  }

  .case-d .case-copy{
    order:2 !important;
    width:100% !important;
    padding:0 !important;
  }

  /* touch devices have no hover: show the main screenshot */
  .case-shot-favboiler .favboiler-img-default{
    opacity:1 !important;
  }

  .case-shot-favboiler .favboiler-img-hover{
    opacity:0 !important;
  }
}


/* =========================================================
   v46 — popup title in 2 lines + cleaner contact form heading
   ========================================================= */

/* Education popup title — exactly two lines */
.about-education-popup__copy h3{
  display:block !important;
}

.about-education-popup__copy h3 > span{
  display:block !important;
  white-space:nowrap !important;
}

/* Contact form: one-line heading, no eyebrow/helper copy */
.contact-editorial__form-label{
  display:none !important;
}

.contact-editorial__form-head{
  display:block !important;
  margin-bottom:30px !important;
}

.contact-editorial__form-head h3{
  white-space:nowrap !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 !important;
  font-size:clamp(34px,2.55vw,48px) !important;
  line-height:1 !important;
}

.contact-editorial__form-head p{
  display:none !important;
}

@media (max-width:1180px){
  .contact-editorial__form-head h3{
    font-size:clamp(30px,2.7vw,42px) !important;
  }
}

@media (max-width:860px){
  .contact-editorial__form-head{
    margin-bottom:24px !important;
  }

  .contact-editorial__form-head h3{
    width:auto !important;
    max-width:100% !important;
    font-size:clamp(30px,8vw,38px) !important;
    white-space:nowrap !important;
  }

  .about-education-popup__copy h3 > span{
    white-space:normal !important;
  }
}

@media (max-width:420px){
  .contact-editorial__form-head h3{
    font-size:28px !important;
  }
}


/* =========================================================
   v47 — explicit image replacements + better framing
   ========================================================= */

.visual-pair-wide img{
  object-fit:cover !important;
  object-position:center 58% !important;
}

.visual-pair-narrow img{
  object-fit:cover !important;
  object-position:center 52% !important;
}

.about-photo-real img{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  object-fit:contain !important;
  object-position:center center !important;
}

@media (max-width:700px){
  .visual-pair-wide img{
    object-position:center 60% !important;
  }

  .visual-pair-narrow img{
    object-position:center 50% !important;
  }

  .about-photo-real img{
    width:min(92%,430px) !important;
    max-width:92% !important;
  }
}


/* =========================================================
   v48 — exact image corrections
   ========================================================= */

/* Decorative pair:
   LEFT = cat, RIGHT = field */
.visual-pair-wide img{
  object-fit:cover !important;
  object-position:center 42% !important;
}

.visual-pair-narrow img{
  object-fit:cover !important;
  object-position:center 55% !important;
}

/* FAVBOILER new supplied cover */
.case-shot-favboiler .favboiler-img-default{
  object-fit:cover !important;
  object-position:center center !important;
}

/* Keep hover replacement from the previous setup */
@media (hover:hover){
  .case-d:hover .favboiler-img-default{
    opacity:0 !important;
  }

  .case-d:hover .favboiler-img-hover{
    opacity:1 !important;
  }
}

@media (max-width:700px){
  .visual-pair-wide img{
    object-position:center 40% !important;
  }

  .visual-pair-narrow img{
    object-position:center 58% !important;
  }

  .case-shot-favboiler .favboiler-img-default{
    opacity:1 !important;
  }

  .case-shot-favboiler .favboiler-img-hover{
    opacity:0 !important;
  }
}


/* =========================================================
   v49 — final three-case order
   01 FAVBOILER / 02 АВТОШКОЛА / 03 САЛОН КРАСОТЫ
   ========================================================= */

.case-favboiler .case-shot{
  position:relative;
  overflow:hidden;
  background:#fff;
}

.case-favboiler .favboiler-img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1) !important;
}

.case-favboiler .favboiler-img-default{
  z-index:1;
  opacity:1;
}

.case-favboiler .favboiler-img-hover{
  z-index:2;
  opacity:0;
  transform:scale(1.015);
}

@media (hover:hover){
  .case-favboiler:hover .favboiler-img-default{
    opacity:0;
    transform:scale(1.025);
  }

  .case-favboiler:hover .favboiler-img-hover{
    opacity:1;
    transform:scale(1);
  }
}

@media (max-width:700px){
  .case-favboiler .favboiler-img-default{
    opacity:1 !important;
  }

  .case-favboiler .favboiler-img-hover{
    opacity:0 !important;
  }
}


/* =========================================================
   v50 — FAVBOILER static cover + new first visual-pair image
   ========================================================= */

/* FAVBOILER: no image swap on hover anymore */
.case-favboiler .favboiler-img-default{
  opacity:1 !important;
  transform:none !important;
}

.case-favboiler:hover .favboiler-img-default{
  opacity:1 !important;
  transform:none !important;
}

.case-favboiler .favboiler-img-hover{
  display:none !important;
}

/* "Хотите увидеть вариант..." — first image is the new traffic-light photo */
.visual-pair-wide img{
  object-fit:cover !important;
  object-position:center 54% !important;
}

@media (max-width:700px){
  .visual-pair-wide img{
    object-position:center 58% !important;
  }
}


/* =========================================================
   v51 — exact image assignment requested
   LEFT visual = new attachment
   RIGHT visual = cat
   CASE 01 = old placeholder-window image
   ========================================================= */

.visual-pair-wide img{
  object-fit:cover !important;
  object-position:center 52% !important;
}

.visual-pair-narrow img{
  object-fit:cover !important;
  object-position:center 48% !important;
}

/* FAVBOILER: use the old window image statically */
.case-favboiler .favboiler-img-default{
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  transform:none !important;
}

.case-favboiler:hover .favboiler-img-default{
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:700px){
  .visual-pair-wide img{
    object-position:center 54% !important;
  }

  .visual-pair-narrow img{
    object-position:center 46% !important;
  }
}


/* =========================================================
   v52 — new left visual + new popup collage + exact 2-line title
   ========================================================= */

.visual-pair-wide img{
  object-fit:cover !important;
  object-position:center 52% !important;
}

/* Popup image */
.about-education-popup__media img{
  object-fit:contain !important;
  object-position:center center !important;
}

/* Exact popup heading split:
   line 1 — Образование
   line 2 — и подготовка */
.about-education-popup__copy h3 > span{
  display:block !important;
  white-space:nowrap !important;
}

@media (max-width:700px){
  .visual-pair-wide img{
    object-position:center 55% !important;
  }

  .about-education-popup__copy h3 > span{
    white-space:nowrap !important;
  }
}


/* =========================================================
   v54 — legal pages: privacy policy + public offer
   ========================================================= */

.legal-page{
  background:#ededeb;
  color:var(--ink);
}

.legal-topbar{
  position:fixed !important;
}

.legal-main{
  padding:104px 0 120px;
}

.legal-shell{
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
}

.legal-kicker{
  grid-column:1 / 4;
  padding-top:14px;

  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#777;
}

.legal-document{
  grid-column:4 / 12;

  padding:0 0 40px;
}

.legal-document h1{
  margin:0 0 54px;

  font-family:var(--display,"Arial Narrow",sans-serif);
  font-size:clamp(54px,6vw,94px);
  line-height:1.02;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.legal-document .legal-lead{
  margin:-36px 0 42px;
  font-size:20px;
  line-height:1.4;
  color:#666;
}

.legal-document h2{
  margin:56px 0 18px;
  padding-top:18px;

  border-top:1px solid rgba(35,35,35,.16);

  font-size:18px;
  line-height:1.25;
  font-weight:700;
}

.legal-document p,
.legal-document li{
  font-size:15px;
  line-height:1.7;
}

.legal-document p{
  margin:0 0 14px;
}

.legal-document ul{
  margin:8px 0 20px;
  padding-left:20px;
}

.legal-document li{
  margin:0 0 6px;
}

.legal-document a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-date{
  margin-top:54px !important;
  padding-top:20px;
  border-top:1px solid rgba(35,35,35,.16);
  color:#666;
}

.legal-note{
  margin-top:48px !important;
  padding:22px 24px;
  border:1px solid rgba(35,35,35,.16);
  font-style:italic;
}

.legal-footer{
  padding-top:54px !important;
}

@media (max-width:980px){
  .legal-shell{
    grid-template-columns:repeat(8,minmax(0,1fr));
  }

  .legal-kicker{
    grid-column:1 / 3;
  }

  .legal-document{
    grid-column:3 / 9;
  }
}

@media (max-width:700px){
  .legal-main{
    padding:76px 18px 84px;
  }

  .legal-shell{
    width:100%;
    display:block;
  }

  .legal-kicker{
    margin-bottom:26px;
  }

  .legal-document h1{
    margin-bottom:38px;
    font-size:clamp(40px,11vw,56px);
    line-height:1.06;
  }

  .legal-document .legal-lead{
    margin:-24px 0 32px;
    font-size:17px;
  }

  .legal-document h2{
    margin-top:42px;
    font-size:17px;
  }

  .legal-document p,
  .legal-document li{
    font-size:14px;
    line-height:1.65;
  }

  .legal-note{
    padding:18px;
  }
}


/* =========================================================
   v56 — fix header CTA on legal pages
   ========================================================= */

.legal-page .topbar{
  grid-template-columns:minmax(220px,1fr) auto auto !important;
  align-items:center !important;
}

.legal-page .btn-header{
  position:static !important;
  inset:auto !important;
  transform:none !important;

  width:auto !important;
  min-width:160px !important;
  max-width:none !important;
  height:36px !important;
  min-height:36px !important;

  margin:0 !important;
  padding:0 0 0 14px !important;

  display:grid !important;
  grid-template-columns:1fr 40px !important;
  align-items:center !important;

  justify-self:end !important;
  align-self:center !important;

  white-space:nowrap !important;
}

.legal-page .btn-header span{
  display:block !important;
  line-height:1 !important;
}

.legal-page .btn-header b{
  width:40px !important;
  height:36px !important;
  display:grid !important;
  place-items:center !important;
}

@media (max-width:980px){
  .legal-page .topbar{
    grid-template-columns:minmax(0,1fr) auto !important;
  }

  .legal-page .nav{
    display:none !important;
  }

  .legal-page .btn-header{
    min-width:142px !important;
    height:34px !important;
    min-height:34px !important;
    font-size:10px !important;
    padding-left:12px !important;
    grid-template-columns:1fr 36px !important;
  }

  .legal-page .btn-header b{
    width:36px !important;
    height:34px !important;
  }
}

@media (max-width:480px){
  .legal-page .brand{
    max-width:130px !important;
  }

  .legal-page .btn-header{
    min-width:126px !important;
    font-size:9px !important;
    grid-template-columns:1fr 32px !important;
  }

  .legal-page .btn-header b{
    width:32px !important;
  }
}


/* =========================================================
   v57 — footer links cleanup + cookie banner
   ========================================================= */

.footer-main{
  grid-template-columns:1fr !important;
  min-height:0 !important;
}

.footer-links-three{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:28px !important;
  flex-wrap:wrap !important;
}

.footer-links-three .footer-big-link{
  white-space:nowrap !important;
}

.footer-contact-side,
.social-links{
  display:none !important;
}

/* Cookie banner */
.cookie-banner{
  position:fixed;
  left:24px;
  right:24px;
  bottom:24px;
  z-index:10000;

  max-width:760px;
  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  padding:16px 18px;

  background:#2d2d2d;
  color:#f3f2ee;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.18);

  font-size:12px;
  line-height:1.45;

  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}

.cookie-banner.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.cookie-banner__text{
  max-width:58ch;
}

.cookie-banner__text a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

.cookie-banner__button{
  flex:0 0 auto;
  min-height:40px;
  padding:0 16px;

  border:0;
  background:var(--red);
  color:#fff;

  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
}

.cookie-banner__button:hover{
  background:#f2f1ed !important;
  color:#2d2d2d !important;
}

@media (max-width:700px){
  .footer-links-three{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
  }

  .cookie-banner{
    left:12px;
    right:12px;
    bottom:12px;

    flex-direction:column;
    align-items:stretch;
    gap:14px;

    padding:14px;
  }

  .cookie-banner__button{
    width:100%;
  }
}


/* =========================================================
   v58 — cookies notice: guaranteed on every page
   ========================================================= */

.cookie-banner{
  max-width:820px !important;
  border-radius:0 !important;
}

.cookie-banner__button{
  min-width:96px !important;
}


/* =========================================================
   v59 — phone contact
   ========================================================= */

.footer-links-three{
  row-gap:12px !important;
}

@media (max-width:700px){
  .footer-links-three .footer-big-link[href^="tel:"]{
    margin-top:2px;
  }
}


/* =========================================================
   v60 — mobile hero width + exact 3-line heading
   ========================================================= */

@media (max-width:700px){

  /* Let the hero content use the full viewport width with normal gutters */
  .hero,
  .hero-inner,
  .hero-grid,
  .hero-copy{
    width:100% !important;
    max-width:none !important;
  }

  .hero{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .hero-inner,
  .hero-grid{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hero-copy{
    grid-column:1 / -1 !important;
  }

  /* Exact mobile title: 3 lines */
  .hero h1{
    width:100% !important;
    max-width:none !important;
  }

  .hero h1 > span{
    display:block !important;
    white-space:nowrap !important;
  }

  /* Supporting copy should be wider too */
  .hero .hero-text,
  .hero .hero-copy p,
  .hero .lead,
  .hero .hero-description{
    width:100% !important;
    max-width:none !important;
  }
}

@media (max-width:420px){
  .hero{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .hero h1 > span{
    white-space:normal !important;
  }
}


/* =========================================================
   v61 — mobile text width + heading spacing + footer overflow
   ========================================================= */

@media (max-width:700px){

  /* Recognition heading: natural wrapping with real spaces */
  .recognition .section-heading h2{
    width:100% !important;
    max-width:none !important;
    line-height:1.12 !important;
  }

  /* ABOUT — use the full mobile content width */
  .about,
  .about-layout,
  .about-title,
  .about-copy{
    width:100% !important;
    max-width:none !important;
  }

  .about-title h2{
    width:100% !important;
    max-width:none !important;
    line-height:1.12 !important;
  }

  .about-copy p,
  .about-copy .about-lead{
    width:100% !important;
    max-width:none !important;
  }

  /* PROCESS — same full-width logic as the hero/about text */
  .process,
  .process-title,
  .process-steps,
  .process-steps article,
  .process-steps h3,
  .process-steps p{
    width:100% !important;
    max-width:none !important;
  }

  .process-title{
    line-height:1.12 !important;
  }

  .process-steps h3{
    max-width:none !important;
  }

  .process-steps p{
    max-width:none !important;
  }

  /* Footer: prevent long "ВКонтакте" link from leaving viewport */
  .footer-links.footer-links-inline.footer-links-three{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;

    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .footer-links.footer-links-inline.footer-links-three .footer-big-link{
    display:block !important;

    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;

    font-size:clamp(24px,7vw,32px) !important;
    line-height:1.06 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
}

@media (max-width:380px){
  .footer-links.footer-links-inline.footer-links-three .footer-big-link{
    font-size:23px !important;
  }
}


/* =========================================================
   v62 — new FAVBOILER case cover
   ========================================================= */

.case-favboiler .favboiler-img-default{
  object-fit:cover !important;
  object-position:center center !important;
}


/* =========================================================
   v63 — footer phone: quieter visual hierarchy
   ========================================================= */

/* Desktop/tablet: keep social links dominant, phone secondary */
.footer-links-three .footer-big-link[href^="tel:"]{
  display:inline-block !important;
  width:auto !important;
  margin-top:8px !important;

  font-size:clamp(24px,2.3vw,38px) !important;
  line-height:1.05 !important;
  letter-spacing:-.03em !important;
  font-weight:500 !important;

  opacity:.72 !important;
}

/* Put the phone on a separate visual row without making it huge */
.footer-links-three{
  align-items:flex-start !important;
}

@media (min-width:701px){
  .footer-links-three .footer-big-link[href^="tel:"]{
    flex-basis:100% !important;
  }
}

@media (max-width:700px){
  .footer-links-three .footer-big-link[href^="tel:"]{
    margin-top:4px !important;
    font-size:22px !important;
    opacity:.78 !important;
  }
}


/* =========================================================
   v65 — compact mobile hero: remove dead vertical space
   ========================================================= */

@media (max-width:700px){
  .hero{
    padding-top:34px !important;
    padding-bottom:0 !important;
  }

  .hero-grid{
    gap:0 !important;
  }

  .hero-copy{
    padding-bottom:0 !important;
  }

  .hero-actions{
    margin-top:22px !important;
  }

  .hero-photo-wrap{
    margin-top:-18px !important;
    padding:0 !important;
    min-height:0 !important;
  }

  .hero-photo{
    display:block !important;
    width:min(100%,460px) !important;
    margin:0 auto !important;
  }
}

@media (max-width:420px){
  .hero-photo-wrap{
    margin-top:-24px !important;
  }

  .hero-photo{
    width:100% !important;
  }
}


/* =========================================================
   v66 — mobile hero exact 3 lines + taller visual pair
   ========================================================= */

/* Decorative image pair — make both images noticeably taller */
@media (min-width:701px){
  .visual-pair{
    align-items:end !important;
  }

  .visual-pair-wide{
    height:clamp(460px,31vw,560px) !important;
    aspect-ratio:auto !important;
  }

  .visual-pair-narrow{
    height:clamp(390px,25vw,470px) !important;
    aspect-ratio:auto !important;
  }

  .visual-pair-wide img,
  .visual-pair-narrow img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

@media (max-width:700px){
  /* Hero title must be exactly 3 lines:
     1. Как будет выглядеть
     2. ваш сайт?
     3. Покажу до оплаты
  */
  .hero h1{
    width:100% !important;
    max-width:none !important;
    font-size:clamp(35px,9.45vw,41px) !important;
    line-height:1.06 !important;
    letter-spacing:-.035em !important;
  }

  .hero-title-main,
  .hero-title-dark{
    width:100% !important;
    max-width:none !important;
  }

  .hero-title-main .forced-line,
  .hero-title-accent{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    white-space:nowrap !important;
  }

  .hero-title-accent{
    margin-top:5px !important;
    font-size:1em !important;
  }

  /* Keep supporting text as wide as the mobile viewport content area */
  .hero-lead,
  .hero-note,
  .hero-copy p{
    width:100% !important;
    max-width:none !important;
  }

  /* Taller images in "Хотите увидеть вариант..." */
  .visual-pair-wide,
  .visual-pair-narrow{
    height:clamp(360px,105vw,480px) !important;
    aspect-ratio:auto !important;
  }

  .visual-pair-wide img,
  .visual-pair-narrow img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

@media (max-width:380px){
  .hero h1{
    font-size:35px !important;
  }
}