/* Production design audit: contrast, rhythm, interaction and mobile fit */
:root{--ark-ink:#11130f;--ark-paper:#f3f1e9;--ark-yellow:#ffd633;--ark-amber:#8a6d00}

/* High-contrast typography on light sections */
.process .section-title em,.cases .section-title em{color:var(--ark-amber)}
.process .section-title em{font-weight:500}
.cases .section-title p{color:#5f635c}
.section-label{font-size:11px;line-height:1.4}
.case-note{font-size:12px;line-height:1.65;color:#60645d;max-width:760px}

/* More purposeful vertical rhythm */
.section{padding-block:clamp(92px,8vw,116px)}
.section-label{margin-bottom:clamp(50px,5vw,68px)}
.section-title{margin-bottom:clamp(48px,5vw,68px)}
.advantages{margin-top:clamp(64px,7vw,88px)}

/* Comfortable, predictable targets */
.header .logo,.header-phone,.nav a{min-height:44px;display:flex;align-items:center}
.menu{min-width:44px;height:44px}
.nav a{opacity:.72;padding-inline:2px}
.nav a.active{opacity:1;color:var(--ark-yellow)}
.nav a.active:after{transform:scaleX(1);transform-origin:left}
.custom-select-trigger{min-height:48px!important}
.custom-select-option{min-height:44px!important}
.case-link{min-height:44px;display:inline-flex;align-items:center}
.phone-popover-close{width:40px!important;height:40px!important;right:9px!important;top:7px!important}
.site-footer a,.contact-row>a{min-height:44px;display:flex;align-items:center}
.consent{min-height:44px;cursor:pointer}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Small refinements that make the interface feel less template-like */
.service>button{min-height:88px}
.service>button strong{letter-spacing:-.025em}
.service-detail p,.service-detail li{line-height:1.65}
.case-copy small{font-size:10px;line-height:1.5}
.case-copy h3{letter-spacing:-.025em}
.quick-form .field>span,.modal-main .field>span{font-size:9px!important;line-height:1.4}
.form-group-title small{font-size:10px}
.phone-popover-label,.phone-popover small{font-size:10px}
.phone-copy-status{font-size:10px}

/* Drawer must never create a sideways scroll on narrow phones */
.modal,.modal-main,.modal form,.modal-fields,.modal .field{min-width:0}
.modal-main input,.modal-main select,.modal-main textarea{max-width:100%;min-width:0}

@media(max-width:900px){
  .section{padding-block:78px}
  .section-label{margin-bottom:48px}
  .section-title{margin-bottom:48px}
  .site-footer a{min-height:44px}
}

@media(max-width:600px){
  .section{padding:72px 20px}
  .advantages{margin-top:54px}
  .service>button{min-height:76px}
  .case-copy{min-height:250px!important}
  .case-note{margin-top:24px}
  .timeline li{padding-block:26px}
  .modal{width:100vw!important;max-width:100vw!important;height:100svh!important;overflow-x:hidden!important;border-radius:0!important}
  .modal-main{width:100%!important;max-width:100%!important;padding-inline:20px!important;overflow-x:hidden!important}
  .modal-fields{width:100%;max-width:100%;overflow:visible}
  .modal-main .field input,.modal-main .field select,.modal-main .field textarea{width:100%!important}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.nav a,.service,.service>button i{transition:none!important}}